Merge pull request #2090 from matrix-org/t3chguy/devtools_focus

fix Devtools input autofocus && state traversal when len === 1 && key=""
This commit is contained in:
Michael Telatynski 2018-07-26 22:28:07 +01:00 committed by GitHub
commit 6093f0ca68
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -61,7 +61,7 @@ class GenericEditor extends DevtoolsComponent {
<label htmlFor={id}>{ label }</label> <label htmlFor={id}>{ label }</label>
</div> </div>
<div className="mx_DevTools_inputCell"> <div className="mx_DevTools_inputCell">
<input id={id} className="mx_TextInputDialog_input" onChange={this._onChange} value={this.state[id]} size="32" /> <input id={id} className="mx_TextInputDialog_input" onChange={this._onChange} value={this.state[id]} size="32" autoFocus={true} />
</div> </div>
</div>; </div>;
} }
@ -303,10 +303,13 @@ class FilteredList extends React.Component {
const TruncatedList = sdk.getComponent("elements.TruncatedList"); const TruncatedList = sdk.getComponent("elements.TruncatedList");
return <div> return <div>
<input size="64" <input size="64"
autoFocus={true}
onChange={this.onQuery} onChange={this.onQuery}
value={this.props.query} value={this.props.query}
placeholder={_t('Filter results')} placeholder={_t('Filter results')}
className="mx_TextInputDialog_input mx_DevTools_RoomStateExplorer_query" /> className="mx_TextInputDialog_input mx_DevTools_RoomStateExplorer_query"
// force re-render so that autoFocus is applied when this component is re-used
key={this.props.children[0] ? this.props.children[0].key : ''} />
<TruncatedList getChildren={this.getChildren} <TruncatedList getChildren={this.getChildren}
getChildCount={this.getChildCount} getChildCount={this.getChildCount}
truncateAt={this.state.truncateAt} truncateAt={this.state.truncateAt}
@ -414,10 +417,10 @@ class RoomStateExplorer extends DevtoolsComponent {
const stateKeys = Object.keys(stateGroup); const stateKeys = Object.keys(stateGroup);
let onClickFn; let onClickFn;
if (stateKeys.length > 1) { if (stateKeys.length === 1 && stateKeys[0] === '') {
onClickFn = this.browseEventType(evType);
} else if (stateKeys.length === 1) {
onClickFn = this.onViewSourceClick(stateGroup[stateKeys[0]]); onClickFn = this.onViewSourceClick(stateGroup[stateKeys[0]]);
} else {
onClickFn = this.browseEventType(evType);
} }
return <button className={classes} key={evType} onClick={onClickFn}> return <button className={classes} key={evType} onClick={onClickFn}>