Material-ui: [TextField] verliert den Fokus auf das Rendern

+1

Ich muss das Ereignis onBlur mit defaultValue verwenden, damit die Textfelder reibungslos funktionieren.

Hat jemand eine Problemumgehung, um diese Arbeit zu machen?

Ich denke nicht mehr, dass dies ein Problem ist. Siehe Code unten:

//taken from examples/webpack-example

/** In this file, we create a React component which incorporates components provided by material-ui */

const React = require('react');
const RaisedButton = require('material-ui/lib/raised-button');
const TextField = require('material-ui/lib/text-field');
const Dialog = require('material-ui/lib/dialog');
const ThemeManager = require('material-ui/lib/styles/theme-manager');
const LightRawTheme = require('material-ui/lib/styles/raw-themes/light-raw-theme');
const Colors = require('material-ui/lib/styles/colors');

const Main = React.createClass({

  childContextTypes: {
    muiTheme: React.PropTypes.object,
  },

  getInitialState () {
    return {
      muiTheme: ThemeManager.getMuiTheme(LightRawTheme),
      counter: 0,
    };
  },

  getChildContext() {
    return {
      muiTheme: this.state.muiTheme,
    };
  },

  componentWillMount() {
    let newMuiTheme = ThemeManager.modifyRawThemePalette(this.state.muiTheme, {
      accent1Color: Colors.deepOrange500,
    });

    this.setState({muiTheme: newMuiTheme});
  },

  componentDidMount() {
    this.refs.textField.focus();
  },

  render() {

    console.log(this.state.counter);

    let containerStyle = {
      textAlign: 'center',
      paddingTop: '200px',
    };

    let standardActions = [
      { text: 'Okay' },
    ];

    return (
      <div style={containerStyle}>
        <Dialog
          title="Super Secret Password"
          actions={standardActions}
          ref="superSecretPasswordDialog">
          1-2-3-4-5
        </Dialog>

        <h1>material-ui</h1>
        <h2>example project</h2>

        <TextField ref="textField" onChange = {this._incrementStateCounter}/>
        <RaisedButton label="Super Secret Password" primary={true} onTouchTap={this._handleTouchTap} />

      </div>
    );
  },

  _handleTouchTap() {
    this.refs.superSecretPasswordDialog.show();
  },

  _incrementStateCounter () {
    this.setState({counter: this.state.counter + 1});
  },

});

module.exports = Main;

Hier ist die App in Aktion (wobei der aktualisierte Status in der Konsole protokolliert wird, wenn sich die TextField-Eingabe ändert). Sie können sehen, dass das TextField den Fokus behält:

Ich verstehe das immer noch. Das Beispiel
Gebrauch zu reproduzieren
<TextField ref="textField" value={this.state.valueToBeEdited} onChange = {this._incrementStateCounter}/>

oder

<TextField ref="textField" defaultValue={this.state.valueToBeEdited} onChange = {this._incrementStateCounter}/>

Ich sehe auch, was eine Regression dieses Themas zu sein scheint. Meine TextFields verlieren den Fokus auf das erneute Rendern. Ich setze die value Requisite der TextField , also ist es eine kontrollierte Komponente.

Ich bemerke eine neue Warnung in der Konsole: 'TextField ändert eine unkontrollierte Eingabe des zu steuernden Texttyps'. Ich kann mich nicht erinnern, das vorher gesehen zu haben, nicht sicher, ob es hier relevant ist oder nicht. Die Warnung wird angezeigt, sobald ich das erste Zeichen in TextField .

Durch ein wenig Debugging scheint es, dass etwas dazu führt, dass die TextField den Fokus verlieren. Der interne onBlur Handler wird aufgerufen, wodurch der interne Status von isFocused von TextField auf false umgeschaltet wird. Wenn ich document.activeElement während des onBlur -Handlers protokolliere (um festzustellen, welche Komponente den Fokus gestohlen hat), protokolliert sie das Stammverzeichnis des Dokuments (Body).

Ich konnte dies weiter eingrenzen, indem ich feststellte, dass die Quelle des Unschärfeereignisses das erste MenuItem innerhalb eines Menu anderer Stelle in der App war. Das Setzen der Eigenschaft disableAutoFocus auf true mein Problem behoben. Hoffe das hilft jemand anderem.

Ich habe eine separate Ausgabe geöffnet, um dies zu erfassen: # 4387.

Ich kann bestätigen, dass dies immer noch ein Problem ist ...

Anzeigen in einem sehr einfachen Anmeldeformular - Ich verwende dies in Verbindung mit Redux-Formularen. Wenn ich mit dem Formular interagiere, wird ein erneutes Rendern (Berühren eines Felds in der Sprache der Redux-Form) ausgelöst, das den Fokus verliert.

Um dieses Problem zu umgehen, rendere ich das eigentliche Formular nur erneut, wenn sich der Fehlerstatus geändert hat.

Sie können dieses Problem einfach reproduzieren, indem Sie TextField in einen Table setzen, der als selectable=true . Wenn Sie auf ein Textfeld klicken, um es zu bearbeiten, erhält die Linie den Fokus und ändert daher ihre Hintergrundfarbe (ich denke, einige props der Linie könnten als selected=true ) Wenn Sie ein erneutes Rendern auslösen, verlieren Sie den Fokus ...

Sie können also im Grunde genommen kein TextField innerhalb eines selectable Table , nicht sicher, ob es eine gute UX-Praxis ist, aber trotzdem :)

Wir haben festgestellt, dass ich bei unserem Projekt versuchen kann, einen Wiedergabegerät zu pushen.

Irgendwelche Abhilfemaßnahmen? Beachten Sie dies auch, wenn Sie einen regulären Eingabetextbereich innerhalb einer Tabelle verwenden.

@ dalexander01 Es wurde eine "Lösung" gefunden, die jedoch sehr

@deyceg bitte tun, es kann nicht schaden 😄. Stoßen Sie einfach auf dieses Problem mit dieser Kombination aus <Dialog/> und <TextField/> .

      <Dialog
        open={this.props.showDialog}
        title={'New ' + this.props.type}
        autoScrollBodyContent={true}
        actions={actions}
        bodyStyle={styles.dialogContent}
      >
        <SelectField
          name='sub_type'
          value={this.props.top_card.sub_type}
          onChange={(e, k, payload) => this.props.topCardSelectChange('sub_type', payload)}
          floatingLabelText='Type'
        >
          {menuItemsJSX}
        </SelectField>
        <TextField
          name='title'
          className='story-title'
          value={this.props.top_card.title}
          onChange={this.props.topCardChange}
          floatingLabelText='Title'
          fullWidth={true}
          multiLine={true}
          style={styles.title}
        />
        <TextField />
      </Dialog>

Ich habe es für meinen Fall gelöst. Sie müssen diesem Textfeld eine eindeutige ID geben.
...
Die ID sollte sich jedoch nach dem erneuten Rendern nicht ändern. Auf diese Weise kann React verfolgen, welches Element fokussiert war oder nicht.
PS Ich hatte Textfelder in einem Array, das über myArray.map gerendert wird. Dort müssen Sie beim erneuten Rendern dieselben Schlüssel angeben.

BEARBEITEN: Ich habe erneut getestet. Nur das Problem, dass der "Schlüssel" auf myArray für alle Renderer gleich ist, hat das Problem gelöst.
Die Textfeld-ID wurde in shortid.generate () geändert.

    params.map(function(p,i){
        return(
           <div key={i}>              <--- this will always be the same for this particular row.
               <div className='param-inner'>
                   <TextField id={shortid.generate()} value = {p.value} onChange={this.updateParam.bind(this,i)}/>               <-- id here can be random, but it is necessary to avoid browser warning "we don't have enough information..."
                   </div>
               <div className='param-inner'>{p.unit}</div>
           </div>
        )
    }.bind(this));

Hat es jemand geschafft, eine Problemumgehung für dieses Problem zu finden (ohne refs )? Es scheint die Kombination von onChange und dem Setzen der value -Stütze auf einen Statusschlüssel zu sein, der den Fokus der Eingabe verliert.

Ich hatte auch das folgende Problem. Ich habe es jedoch gelöst, indem ich die SelectField-Implementierung verwendet habe, wenn Sie sehen, dass intern ein Dropdown-Menü aufgerufen wird . js # L192

Damit ich auch ein DropDownMenu hinzufügen kann, werden die Komponenten intern in ein Menü eingebunden. Ich habe disableAutoFocus hinzugefügt, damit mein TextField den Fokus darauf behält, wie unten gezeigt.

Vielleicht können wir eine DropDownMenu-Komponente aus dem SelectField verfügbar machen und zulassen, dass der Autofokus mit Requisiten deaktiviert wird.

Eine Problemumgehung für diejenigen, die damit zu kämpfen haben und nur möchten, dass etwas funktioniert, obwohl es möglicherweise in bestimmten Situationen nicht anwendbar ist und Probleme aufwirft (ich bin mir jedoch nicht ganz sicher), ist die Verwendung einer Variablen für die Instanz als der Staat. Anstelle von this.state.value wäre es also this.value , das onChange aktualisiert würde. Die Komponente hätte keine value Requisite. Dann würden Sie auf dem onChange Handler e.target.value .

Der einzige mir bekannte Unterschied zwischen einer Variablen in der Instanz und dem Status besteht darin, dass die Instanzvariable kein erneutes Rendern auslöst. Obwohl es andere Gründe geben könnte, hoffe ich, dass andere meine Lücke in diesem Fall schließen werden.

Immer noch diesen Fehler. Irgendwelche Workarounds?

Die Problemumgehung bestand darin, die Funktion shouldComponentUpdate für meine Komponente zu überschreiben und dann false zurückzugeben, wenn ich die von meinen Textfeldern verwendeten Statuswerte änderte.

`shouldComponentUpdate(nextProps, nextState) {    

    if(nextState.email != this.state.email) {  

      return false;  

    }

    else if(nextState.password != this.state.password) {  

      return false;  

    }  
    else return true;  
    }

`

Auf diese Weise wurde mein Problem behoben. Das Problem scheint das Rendern der Komponente zu sein, wenn sich der Status ändert, wodurch der Fokus zurückgesetzt wird. Wenn Sie also die obige Funktion verwenden, um das Rendern zu deaktivieren, wenn Sie ein onChange-Ereignis ausführen, um Statuswerte festzulegen, wird die Komponente nicht neu geladen.

@ Aspintyl000 das funktioniert ... etwas. Wenn ich den Wert des Textfelds über die Requisite 'value' einstelle und diese Requisite auf 'this.state.value' setze, wird nichts angezeigt. Obwohl, wenn ich das entferne, scheint es zu funktionieren.

Ich verwende Textfelder in einer Tabellenzeile, und dies ist ein Problem :( irgendwelche Fortschritte?

Psid.txt

Ich habe auch den gleichen Fehler bekommen. Aber nach der Verwendung von componentDidMount () {
this.refs.textField.focus ();
}}
es verliert nicht den Fokus. Der Eingabewert wird jedoch nicht angezeigt.

Ich habe versucht, <TextField /> in ein <Table /> . Wie in den obigen Situationen kann ich die Eingabe nicht fokussieren.
Meine Lösung: Fügen Sie dem Ereignis ein onClick -Ereignis hinzu Wenn ich darauf klicke, setze die selectable=false der Tabelle. Verwenden Sie nach Ihrer Eingabe einen onBlue -Ereignis, um die selectable=true der Tabelle

Ziemlich widerliches Verhalten.

Ich hatte dies erlebt, nachdem ich zwei Eingabefelder mit einer gestylten Komponente umwickelt hatte. Die äußere Div hat das Verhalten komplett gebrochen. Dies ist ein schrecklicher Fehler im Design dieser Bibliothek.

Das ist also eine ziemlich schreckliche Problemumgehung, aber die folgenden funktionieren meistens:

`` ``
onSomeValueChanged = event => {
this.props.someValueChanged (event.target.value);

const { target } = event;
setTimeout(() => {
  target.focus();
}, 10);

};
`` ``

Ja, nicht hübsch ...

@scotmatson "Ziemlich widerliches Verhalten ... schrecklicher Fehler im Design dieser Bibliothek". Dies ist freie Software, die von Freiwilligen erstellt wurde ... ein guter Einblick in die Beziehung zu styled-components .

@scotmatson Ich kann bestätigen, dass das Problem zumindest in meinem Fall behoben ist, wenn ich die Container = styled.div , die ich als Wrapper habe, in eine normale, nicht gestylte Komponente div .

Bearbeiten:
Und ich teile auch Ihre Frustrationen. Es wäre wirklich schön, wenn diese beiden Bibliotheken einwandfrei zusammenarbeiten würden. Dieses Problem und das Spezifitätsproblem sind zwei Dinge, von denen ich hoffe, dass sie bald behoben werden, aber ich bin dankbar für die Menschen, die sich freiwillig für ihre Zeit einsetzen.

Edit2:
Ich habe gerade herausgefunden, was das Problem in meinem Fall verursacht hat: deklarierte Komponentenkomponenten in der Rendermethode deklarieren! Dies führte dazu, dass die Komponenten bei jedem erneuten Rendern neu erstellt wurden und React nicht verfolgen konnte, welches Element über die Grenze des erneuten Renderns fokussiert war. Dies führte auch zu einigen anderen Problemen beim erneuten Rendern für mich.

Durch das Verschieben aller Deklarationen für gestaltete Komponenten außerhalb meiner Komponente wurden die Probleme mit dem Fokusverlust für mich behoben. Wahrscheinlich ein Noob-Fehler, aber niemand hat das hier erwähnt, also dachte ich, ich würde zurückkommen und mich melden.

Das Problem, das ich zu haben scheine, ist, dass der Fokus immer dann groß ist, wenn TextFields (oder Eingaben) in einer object.map () gerendert werden. Die TextFields außerhalb der Karten funktionieren einwandfrei. Vermisse ich irgendwelche Requisiten oder sonst etwas? Ich bin total verloren

Ich habe fast jede in diesem Thread vorgeschlagene Lösung ohne Glück ausprobiert.

Die grobe Struktur ist dies

Hauptdatei

...
    function Steps(props) {
      const { steps } = props;
      if(steps) {
        return steps.map((step, index) => (
          <div key={(step.order === '' ? index : step.order)}>
            <NewUxCard step={step} index={index} onChange={props.onChange} 
              onChangeCard={props.onChangeCard} onParamChange={props.onParamChange}/>
          </div>
        ));
      }
    }  

<div>
  <TextField/> //working
  <Steps steps={this.props.ux.steps} onChange={this.onChange} 
              onChangeCard={this.handleChangeCard} onParamChange={this.handleParamChange} /> 
</div>

NewUxCard

...
<div>
  <TextField type="text" fullWidth id={"qq"+this.props.index} label="Name" 
                    value={this.props.step.name} onChange={this.props.onChangeCard('name', this.props.index)} margin="normal" /> //not working - loses focus on each key stroke
</div>

Es ist erwähnenswert, dass ich Redux-React verwende, sodass die Statusänderungen über Eingabe-> Aktion-> Reduzierer erfolgen

Irgendwelche Ideen? Vielen Dank

EDIT 1:
Weitere Untersuchung des Problems, ich habe es eingegrenzt und gelöst, indem ich die Reaktionsfunktion Schritte (Requisiten) entfernt habe, die zum Erstellen eines Tags verwendet wird(in diesem Fall).

Also vorher war die Struktur-> Funktionsschritte (Requisiten) -> Zuordnungsklasse. Also habe ich jetzt die Funktion (den mittleren Mann) entfernt und nur Const Steps -> Mapping Class. Ich kann nur spekulieren, warum dies funktioniert (vielleicht wurden einige Requisiten ignoriert), aber es hat meinen Fall gelöst.

@piltsen Ich bin gerade auf dieses Problem in Version 1.5.0 .map() gerendert habe. Ich habe es auf meinen TextField-Schlüssel eingegrenzt, der den gleichen Wert wie die Eingabe hat. Wenn er geändert wurde, wurde das TextField wahrscheinlich gemountet wieder und den Fokus verlieren. Ich bin mir nicht sicher, ob dir das hilft - obwohl ich mir sicher bin, dass du es inzwischen sortiert hast

Dies ist auch ein Symptom für die Verwendung von Render-Requisiten. So etwas tun

<HigherOrderComponent
    render={hocProps => <TextField value={...} onChange={...} />
/>

kann dieses Verhalten verursachen. Übergeben Sie zum Korrigieren stattdessen ein Fragment, wenn dies vom Design her zulässig ist:

<HigherOrderComponentThatDoesntPassOwnState
    component={<TextField  {...this.props}/>}
/>

In meinem Fall scheint der Fokus nicht verloren gegangen zu sein, aber der Cursor verschwindet aus TextField. Ich kann überprüfen, ob document.activeElement meinem TextField entspricht. Ich kann den Tastaturbefehl und das Mausrad verwenden, um den Wert (Typennummer) zu ändern, aber jeder Typreduzierungslauf wird ausgeführt und der Cursor geht verloren.

Dann suche ich oben im Render nach ID mein TextField und mache

MyTextField.blur();
MyTextField.focus();

, was nicht hilft. Aber wenn ich mit einer gewissen Zeit eine Fokussierung () mache , scheint es zu funktionieren.

Bearbeiten:
Nun, in HOC funktioniert es immer noch nicht, also scheint es sowieso notwendig zu sein, es hochzuschieben.

@ younes0 Ich kann bestätigen, dass dies auch für mich className oder variant angeben musste TextField s wurde dies behoben.

Kann dies wieder geöffnet werden oder sollte eine neue Ausgabe eingereicht werden?

Ich bekomme immer noch dieses Problem, ich verwende 3.2.0

@OmarDavilaP Können Sie eine neue Ausgabe mit einer Reproduktion erstellen?

Ich habe es für meinen Fall gelöst. Sie müssen diesem Textfeld eine eindeutige ID geben.
...
Die ID sollte sich jedoch nach dem erneuten Rendern nicht ändern. Auf diese Weise kann React verfolgen, welches Element fokussiert war oder nicht.
PS Ich hatte Textfelder in einem Array, das über myArray.map gerendert wird. Dort müssen Sie beim erneuten Rendern dieselben Schlüssel angeben.

BEARBEITEN: Ich habe erneut getestet. Nur das Problem, dass der "Schlüssel" auf myArray für alle Renderer gleich ist, hat das Problem gelöst.
Die Textfeld-ID wurde in shortid.generate () geändert.

    params.map(function(p,i){
        return(
           <div key={i}>              <--- this will always be the same for this particular row.
               <div className='param-inner'>
                   <TextField id={shortid.generate()} value = {p.value} onChange={this.updateParam.bind(this,i)}/>               <-- id here can be random, but it is necessary to avoid browser warning "we don't have enough information..."
                   </div>
               <div className='param-inner'>{p.unit}</div>
           </div>
        )
    }.bind(this));

Ja, es löst das Problem in meinem Fall, im Grunde habe ich verwendet:

<NewTextField key={user.id+Math.random()}>
Ich habe es ersetzt durch:

<NewTextField key={user.id}>
Ja, es scheint eine schlechte Praxis zu sein, jedes Mal, wenn die Komponente neu gerendert wird, zufällige Schlüssel zu generieren.

Für mich war das Problem, dass ich eine Wrapper-Funktion für TextField erstellt habe, diese Funktion jedoch innerhalb meiner Komponentenfunktion deklariert habe. Sobald sie außerhalb meiner Funktion verschoben wurde, funktionierte alles wie erwartet!

Ich habe ein Sendbox-Beispiel https://codesandbox.io/s/material-demo-msbxl?fontsize=14&hidenavigation=1&theme=dark erstellt

Ich habe dieses Problem mit dem bedingten Rendern. Ich habe ein Javascript-Objekt im Rendering, das verschiedene Komponenten in der .js-Datei zurückgibt. Ich beschreibe es nicht richtig, sorry. Wenn ich es behebe, werde ich diesen Beitrag bearbeiten, wenn ich mich daran erinnere.

edit: Yay, ich habe es behoben! Ich glaube, die Art und Weise, wie ich bedingt gerendert habe, war das Rendern jeder Komponente, auch wenn sie nicht angezeigt wurde. Ich habe die Logik außerhalb des Renderings verschoben und es scheint jetzt gut zu funktionieren. Hier ist der alte Code:

edit: ich kann mich nicht mit diesem Ding beschäftigen, also vergiss es.

Ich bin heute auf dieses Problem gestoßen und habe ein paar Stunden lang mit dem Kopf darauf geschlagen. In meinem Fall habe ich die TextField in eine zustandslose Komponente verpackt, um meine Seite besser zu organisieren (rendern Sie keine, wenn Daten geladen werden usw. usw.), aber ich habe die useState belassen TextField in der übergeordneten Komponente kontrollierte.

Für die Nachwelt gibt es hier einen kleinen Codesandbox-Link, um meine Dummheit zu reproduzieren: https://codesandbox.io/s/mui-textedit-losefocus-g6xxb

Die Frage ist nun, wie ich meine benutzerdefinierte Komponente erstellen soll, die TextField umschließt. Sowohl HOC als auch createElement scheinen in diesem Fehler aufzutreten:

  const MyField= ({ name, ...props }) => (
    <TextField
      fullWidth
      variant="outlined"
      size="small"
      name={name}
      {...props}
    />
  );

  const MyField= ({ name, ...rest }) => {
    return React.createElement(TextField, {
      fullWidth: true,
      variant: "outlined",
      size: "small",
      name: name,
      {...rest}
    });
  };

Trotzdem funktioniert der obige Ansatz einwandfrei. Ich habe festgestellt, dass ich die benutzerdefinierte Komponente in der übergeordneten Komponente definiert habe, die das Problem verursacht hat. Wenn es außerhalb des übergeordneten Bereichs verschoben wird (wie es sein sollte), funktioniert es einwandfrei. Ich habe die vorherige Sandbox aktualisiert, um den richtigen Ansatz anzuzeigen :

Für mich war das Problem, dass ich eine Wrapper-Funktion für TextField erstellt habe, diese Funktion jedoch innerhalb meiner Komponentenfunktion deklariert habe. Sobald sie außerhalb meiner Funktion verschoben wurde, funktionierte alles wie erwartet!

Ich habe ein Sendbox-Beispiel https://codesandbox.io/s/material-demo-msbxl?fontsize=14&hidenavigation=1&theme=dark erstellt

Das war mein Problem. Vielen Dank!

Trotzdem funktioniert der obige Ansatz einwandfrei. Ich habe festgestellt, dass ich die benutzerdefinierte Komponente in der übergeordneten Komponente definiert habe, die das Problem verursacht hat. Wenn es außerhalb des übergeordneten Bereichs verschoben wird (wie es sein sollte), funktioniert es einwandfrei. Ich habe die vorherige Sandbox aktualisiert, um den richtigen Ansatz anzuzeigen :

Vielen Dank. Das hat funktioniert!

Für mich war das Problem, dass ich eine Wrapper-Funktion für TextField erstellt habe, diese Funktion jedoch innerhalb meiner Komponentenfunktion deklariert habe. Sobald sie außerhalb meiner Funktion verschoben wurde, funktionierte alles wie erwartet!

Ich habe ein Sendbox-Beispiel https://codesandbox.io/s/material-demo-msbxl?fontsize=14&hidenavigation=1&theme=dark erstellt

@ fleischman718 danke, dass du das herausgefunden hast! Das Entfernen der Wrapping-Komponentenfunktion für ein TextField innerhalb der Definition einer übergeordneten Komponente hat mein Problem behoben!

Ich brauchte eine Sekunde, um herauszufinden, was im Sandkasten vor sich ging, also habe ich unten eine Zusammenfassung zusammengestellt:

import { TextField } from '@material-ui/core';

const ParentComponent = () => {

  // DON'T DO THIS!!!
  // fix issue by moving this component definition outside of the ParentComponent
  // or assign the TextField to a variable instead
  const TextFieldWrapper = () => (
    <TextField />
  );

  return (
    <div>
      <TextFieldWrapper />
    </div>
  )
}