autofocus the compose form again on /share #23094
Conversation
| @@ -153,7 +153,7 @@ class ComposeForm extends ImmutablePureComponent { | |||
| // - Replying to zero or one users, places the cursor at the end of the textbox. | |||
| // - Replying to more than one user, selects any usernames past the first; | |||
| // this provides a convenient shortcut to drop everyone else from the conversation. | |||
| if (this.props.focusDate && this.props.focusDate !== prevProps.focusDate) { | |||
| if ((this.props.focusDate && this.props.focusDate !== prevProps.focusDate) || this.props.autoFocus) { | |||
There was a problem hiding this comment.
Added because the /share compose form also needs to move the cursor to the end
There was a problem hiding this comment.
Since this is called from componentDidUpdate as well, this will set the focus and selection to the very end of the textarea for every compose state change, including every keypress in either the textarea or the CW field. I would suggest setting the focusDate through a new action instead.
There was a problem hiding this comment.
I set focusDate in app/javascript/mastodon/reducers/compose.js instead of this change. How about it?
(Sorry, I am not familiar with the React...)
| @@ -9,7 +9,7 @@ export default class Compose extends React.PureComponent { | |||
| render () { | |||
| return ( | |||
| <div> | |||
| <ComposeFormContainer /> | |||
| <ComposeFormContainer autoFocus /> | |||
There was a problem hiding this comment.
Added autoFocus based on the following.
| @@ -153,7 +153,7 @@ class ComposeForm extends ImmutablePureComponent { | |||
| // - Replying to zero or one users, places the cursor at the end of the textbox. | |||
| // - Replying to more than one user, selects any usernames past the first; | |||
| // this provides a convenient shortcut to drop everyone else from the conversation. | |||
| if (this.props.focusDate && this.props.focusDate !== prevProps.focusDate) { | |||
| if ((this.props.focusDate && this.props.focusDate !== prevProps.focusDate) || this.props.autoFocus) { | |||
There was a problem hiding this comment.
Since this is called from componentDidUpdate as well, this will set the focus and selection to the very end of the textarea for every compose state change, including every keypress in either the textarea or the CW field. I would suggest setting the focusDate through a new action instead.
Akkiesoft
force-pushed
the
share-autofocus
branch
from
5dbafb3
to
2673b3f
Compare
| if (hydratedState.has('text')) { | ||
| state = state.set('text', hydratedState.get('text')); | ||
| const text = hydratedState.get('text'); | ||
| if (text) { | ||
| state = state | ||
| .set('text', hydratedState.get('text')) | ||
| .set('focusDate', new Date()); | ||
| } |
There was a problem hiding this comment.
Oh that's actually a good way to do it!
Code-style wise, I'd do something like this though:
| if (hydratedState.has('text')) { | |
| state = state.set('text', hydratedState.get('text')); | |
| const text = hydratedState.get('text'); | |
| if (text) { | |
| state = state | |
| .set('text', hydratedState.get('text')) | |
| .set('focusDate', new Date()); | |
| } | |
| if (hydratedState.get('text')) { | |
| state = state.set('text', hydratedState.get('text')).set('focusDate', new Date()); | |
| } |
There was a problem hiding this comment.
Thanks for the advice. I've pushed the commit again :)
Akkiesoft
force-pushed
the
share-autofocus
branch
from
2673b3f
to
6e6a253
Compare
| @@ -223,7 +223,7 @@ const hydrate = (state, hydratedState) => { | |||
| state = clearAll(state.merge(hydratedState)); | |||
|
|
|||
| if (hydratedState.has('text')) { | |||
There was a problem hiding this comment.
Sorry, it should be hydratedState.get('text'): indeed, the normal interface has a text key with an empty value… which means the change as-is would make the single-column interface back to having auto-focus on the form despite the intent
There was a problem hiding this comment.
Sorry, I missed that...
Akkiesoft
force-pushed
the
share-autofocus
branch
from
6e6a253
to
719c542
Compare
After merging #16517 , compose form on /share does not work autofocus so I fix it.