Merge branch 'compose_caret_to_end' into 'master'

Allow cursor to be rendered at end of textbox by commenting out date comparison conditional

See merge request soapbox-pub/soapbox-fe!4

.gitignore

@@ -6,3 +6,4 @@
 /.eslintcache
 /.env
 /deploy.sh
+/.vs/

app/gabsocial/features/compose/components/compose_form.js

@@ -44,6 +44,7 @@ class ComposeForm extends ImmutablePureComponent {
 
   state = {
     composeFocused: false,
+    caretPosition: 0,
   }
 
   static contextTypes = {
@@ -86,6 +87,9 @@ class ComposeForm extends ImmutablePureComponent {
 
   handleChange = (e) => {
     this.props.onChange(e.target.value);
+    this.setState({
+      caretPosition: e.target.selectionStart,
+    });
   }
 
   handleComposeFocus = () => {
@@ -180,22 +184,24 @@ 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 !== prevProps.focusDate) {
     let selectionEnd, selectionStart;
+    if (this.props.focusDate !== prevProps.focusDate) {
 
       if (this.props.preselectDate !== prevProps.preselectDate) {
         selectionEnd = this.props.text.length;
         selectionStart = this.props.text.search(/\s/) + 1;
-      } else if (typeof this.props.caretPosition === 'number') {
+      } else if (typeof this.state.caretPosition === 'number') {
-        selectionStart = this.props.caretPosition;
+        selectionStart = this.state.caretPosition;
-        selectionEnd   = this.props.caretPosition;
+        selectionEnd = this.state.caretPosition;
-      } else {
-        selectionEnd   = this.props.text.length;
-        selectionStart = selectionEnd;
       }
-
       this.autosuggestTextarea.textarea.setSelectionRange(selectionStart, selectionEnd);
       this.autosuggestTextarea.textarea.focus();
+    } else {
+      if (this.props.preselectDate !== this.props.focusDate) {
+        selectionStart = selectionEnd = this.props.text.length + 1;
+        this.autosuggestTextarea.textarea.setSelectionRange(selectionStart, selectionEnd);
+        this.autosuggestTextarea.textarea.focus();
+      }
     }
   }
 

app/gabsocial/reducers/compose.js

@@ -237,7 +237,8 @@ export default function compose(state = initialState, action) {
   case COMPOSE_CHANGE:
     return state
       .set('text', action.text)
-      .set('idempotencyKey', uuid());
+      .set('idempotencyKey', uuid())
+      .set('focusDate', new Date());
   case COMPOSE_COMPOSING_CHANGE:
     return state.set('is_composing', action.value);
   case COMPOSE_REPLY: