[Glitch] Fix first poll option not being focused when adding a poll

Port af6d356279 to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
This commit is contained in:
ThibG 2020-05-12 15:29:44 +02:00 committed by Thibaut Girka
parent 3baacf6993
commit 6a17fa2b99

View file

@ -28,6 +28,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,
suggestions: ImmutablePropTypes.list, suggestions: ImmutablePropTypes.list,
@ -58,7 +59,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>
@ -75,6 +76,7 @@ class Option extends React.PureComponent {
onSuggestionsClearRequested={this.onSuggestionsClearRequested} onSuggestionsClearRequested={this.onSuggestionsClearRequested}
onSuggestionSelected={this.onSuggestionSelected} onSuggestionSelected={this.onSuggestionSelected}
searchTokens={[':']} searchTokens={[':']}
autoFocus={autoFocus}
/> />
</label> </label>
@ -125,10 +127,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} {...other} />)} {options.map((title, i) => <Option title={title} key={i} index={i} onChange={onChangeOption} onRemove={onRemoveOption} isPollMultiple={isMultiple} autoFocus={i === autoFocusIndex} {...other} />)}
{options.size < pollLimits.max_options && ( {options.size < pollLimits.max_options && (
<label className='poll__text editable'> <label className='poll__text editable'>
<span className={classNames('poll__input')} style={{ opacity: 0 }} /> <span className={classNames('poll__input')} style={{ opacity: 0 }} />