diff --git a/client/src/components/Card/NameEdit.jsx b/client/src/components/Card/NameEdit.jsx index 82446174..1487a950 100644 --- a/client/src/components/Card/NameEdit.jsx +++ b/client/src/components/Card/NameEdit.jsx @@ -5,6 +5,7 @@ import TextareaAutosize from 'react-textarea-autosize'; import { Button, Form, TextArea } from 'semantic-ui-react'; import { useClosableForm, useField } from '../../hooks'; +import { focusEnd } from '../../utils/element-helpers'; import styles from './NameEdit.module.scss'; @@ -79,7 +80,7 @@ const NameEdit = React.forwardRef(({ children, defaultValue, onUpdate }, ref) => useEffect(() => { if (isOpened) { - field.current.ref.current.focus(); + focusEnd(field.current.ref.current); } }, [isOpened]); diff --git a/client/src/components/CardModal/Activities/CommentEdit.jsx b/client/src/components/CardModal/Activities/CommentEdit.jsx index 6da2383d..cd088dfa 100755 --- a/client/src/components/CardModal/Activities/CommentEdit.jsx +++ b/client/src/components/CardModal/Activities/CommentEdit.jsx @@ -6,6 +6,7 @@ import TextareaAutosize from 'react-textarea-autosize'; import { Button, Form, TextArea } from 'semantic-ui-react'; import { useForm } from '../../../hooks'; +import { focusEnd } from '../../../utils/element-helpers'; import styles from './CommentEdit.module.scss'; @@ -70,7 +71,7 @@ const CommentEdit = React.forwardRef(({ children, defaultData, onUpdate }, ref) useEffect(() => { if (isOpened) { - textField.current.ref.current.focus(); + focusEnd(textField.current.ref.current); } }, [isOpened]); diff --git a/client/src/components/CardModal/Tasks/NameEdit.jsx b/client/src/components/CardModal/Tasks/NameEdit.jsx index 2c92680c..88044d2c 100755 --- a/client/src/components/CardModal/Tasks/NameEdit.jsx +++ b/client/src/components/CardModal/Tasks/NameEdit.jsx @@ -5,6 +5,7 @@ import TextareaAutosize from 'react-textarea-autosize'; import { Button, Form, TextArea } from 'semantic-ui-react'; import { useField } from '../../../hooks'; +import { focusEnd } from '../../../utils/element-helpers'; import styles from './NameEdit.module.scss'; @@ -65,7 +66,7 @@ const NameEdit = React.forwardRef(({ children, defaultValue, onUpdate }, ref) => useEffect(() => { if (isOpened) { - field.current.ref.current.focus(); + focusEnd(field.current.ref.current); } }, [isOpened]); diff --git a/client/src/components/List/NameEdit.jsx b/client/src/components/List/NameEdit.jsx index c916726a..ffda7458 100755 --- a/client/src/components/List/NameEdit.jsx +++ b/client/src/components/List/NameEdit.jsx @@ -4,6 +4,7 @@ import TextareaAutosize from 'react-textarea-autosize'; import { TextArea } from 'semantic-ui-react'; import { useField } from '../../hooks'; +import { focusEnd } from '../../utils/element-helpers'; import styles from './NameEdit.module.scss'; @@ -71,7 +72,7 @@ const NameEdit = React.forwardRef(({ children, defaultValue, onUpdate }, ref) => useEffect(() => { if (isOpened) { - field.current.ref.current.select(); + focusEnd(field.current.ref.current); } }, [isOpened]); diff --git a/client/src/utils/element-helpers.js b/client/src/utils/element-helpers.js new file mode 100644 index 00000000..15fe9c4b --- /dev/null +++ b/client/src/utils/element-helpers.js @@ -0,0 +1,5 @@ +// eslint-disable-next-line import/prefer-default-export +export const focusEnd = (element) => { + element.focus(); + element.setSelectionRange(element.value.length + 1, element.value.length + 1); +};