diff --git a/CHANGELOG.md b/CHANGELOG.md index dcf4f5e8e9..49843f30ba 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -54,6 +54,7 @@ - Improve collapsing of whitespace when pasting to slate text block @tiberiuichim - Avoid warning for missing value in NumberWidget @tiberiuichim - Fix crash in Slate link editing in a dexterity field @tiberiuichim +- Fix select widget loosing focus when the value has changed @reebalazs ## 16.1.0 (2022-11-23) diff --git a/src/components/manage/Form/Form.jsx b/src/components/manage/Form/Form.jsx index 5356ca57d2..b8093386cd 100644 --- a/src/components/manage/Form/Form.jsx +++ b/src/components/manage/Form/Form.jsx @@ -201,6 +201,8 @@ class Form extends Component { selected: selectedBlock, multiSelected: [], isClient: false, + // Ensure focus remain in field after change + inFocus: {}, }; this.onChangeField = this.onChangeField.bind(this); this.onSelectBlock = this.onSelectBlock.bind(this); @@ -324,6 +326,13 @@ class Form extends Component { [id]: value || (value !== undefined && isBoolean(value)) ? value : null, }, + // Changing the form data re-renders the select widget which causes the + // focus to get lost. To circumvent this, we set the focus back to + // the input. + // This could fix other widgets too but currently targeted + // against the select widget only. + // Ensure field to be in focus after the change + inFocus: { [id]: true }, }; }); } @@ -607,7 +616,7 @@ class Form extends Component { id={field} fieldSet={item.title.toLowerCase()} formData={this.state.formData} - focus={false} + focus={this.state.inFocus[field]} value={this.state.formData?.[field]} required={schema.required.indexOf(field) !== -1} onChange={this.onChangeField} diff --git a/src/components/manage/Widgets/ArrayWidget.jsx b/src/components/manage/Widgets/ArrayWidget.jsx index 2887d41456..0bfffabe07 100644 --- a/src/components/manage/Widgets/ArrayWidget.jsx +++ b/src/components/manage/Widgets/ArrayWidget.jsx @@ -314,6 +314,9 @@ class ArrayWidget extends Component { isDisabled={this.props.disabled || this.props.isDisabled} className="react-select-container" classNamePrefix="react-select" + /* eslint-disable jsx-a11y/no-autofocus */ + autoFocus={this.props.focus} + /* eslint-enable jsx-a11y/no-autofocus */ options={ this.props.vocabBaseUrl ? choices