Fix first poll option not being focused when adding a poll (#13740)

Fixes #13698
This commit is contained in:
ThibG 2020-05-12 15:29:44 +02:00 committed by GitHub
parent 25307798d7
commit 60dc5738cb

View file

@ -27,6 +27,7 @@ class Option extends React.PureComponent {
title: PropTypes.string.isRequired, title: PropTypes.string.isRequired,
index: PropTypes.number.isRequired, index: PropTypes.number.isRequired,
isPollMultiple: PropTypes.bool, isPollMultiple: PropTypes.bool,
autoFocus: PropTypes.bool,
onChange: PropTypes.func.isRequired, onChange: PropTypes.func.isRequired,
onRemove: PropTypes.func.isRequired, onRemove: PropTypes.func.isRequired,
onToggleMultiple: PropTypes.func.isRequired, onToggleMultiple: PropTypes.func.isRequired,
@ -71,7 +72,7 @@ class Option extends React.PureComponent {
} }
render () { render () {
const { isPollMultiple, title, index, intl } = this.props; const { isPollMultiple, title, index, autoFocus, intl } = this.props;
return ( return (
<li> <li>
@ -96,6 +97,7 @@ class Option extends React.PureComponent {
onSuggestionsClearRequested={this.onSuggestionsClearRequested} onSuggestionsClearRequested={this.onSuggestionsClearRequested}
onSuggestionSelected={this.onSuggestionSelected} onSuggestionSelected={this.onSuggestionSelected}
searchTokens={[':']} searchTokens={[':']}
autoFocus={autoFocus}
/> />
</label> </label>
@ -146,10 +148,12 @@ class PollForm extends ImmutablePureComponent {
return null; return null;
} }
const autoFocusIndex = options.indexOf('');
return ( return (
<div className='compose-form__poll-wrapper'> <div className='compose-form__poll-wrapper'>
<ul> <ul>
{options.map((title, i) => <Option title={title} key={i} index={i} onChange={onChangeOption} onRemove={onRemoveOption} isPollMultiple={isMultiple} onToggleMultiple={this.handleToggleMultiple} {...other} />)} {options.map((title, i) => <Option title={title} key={i} index={i} onChange={onChangeOption} onRemove={onRemoveOption} isPollMultiple={isMultiple} onToggleMultiple={this.handleToggleMultiple} autoFocus={i === autoFocusIndex} {...other} />)}
</ul> </ul>
<div className='poll__footer'> <div className='poll__footer'>