TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-28 13:22:39 +03:00
Code Issues Projects Releases Wiki Activity

Moved autoFocus to the title, when adding a recommendation (#18384)

Browse Source 
no issue
This commit is contained in:
Sag 2023-09-27 18:25:44 +02:00 committed by GitHub
parent 3d91c37d5b
commit 63ac90c603
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 3 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
apps/admin-x-settings/src/admin-x-ds/global/form/TextArea.tsx
View File

@ -1,4 +1,4 @@
import React, {useEffect, useId} from 'react'; import React, {useId} from 'react';
import Heading from '../Heading'; import Heading from '../Heading';
import Hint from '../Hint'; import Hint from '../Hint';
@ -22,7 +22,6 @@ interface TextAreaProps {
fontStyle?: FontStyles; fontStyle?: FontStyles;
className?: string; className?: string;
onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void; onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
autoFocus?: boolean;
} }
const TextArea: React.FC<TextAreaProps> = ({ const TextArea: React.FC<TextAreaProps> = ({
@ -52,14 +51,6 @@ const TextArea: React.FC<TextAreaProps> = ({
setFocusState(false); setFocusState(false);
}; };
useEffect(() => {
if (props.autoFocus && inputRef && inputRef.current) {
const textarea = inputRef.current;
textarea.focus();
textarea.setSelectionRange(textarea.value.length, textarea.value.length);
}
}, [props.autoFocus, inputRef]);
let styles = clsx( let styles = clsx(
'peer order-2 rounded-sm border px-3 py-2 dark:text-white', 'peer order-2 rounded-sm border px-3 py-2 dark:text-white',
clearBg ? 'bg-transparent' : 'bg-grey-75 dark:bg-grey-950', clearBg ? 'bg-transparent' : 'bg-grey-75 dark:bg-grey-950',

6
apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationReasonForm.tsx
View File

@ -1,7 +1,7 @@
import Form from '../../../../admin-x-ds/global/form/Form'; import Form from '../../../../admin-x-ds/global/form/Form';
import Heading from '../../../../admin-x-ds/global/Heading'; import Heading from '../../../../admin-x-ds/global/Heading';
import Hint from '../../../../admin-x-ds/global/Hint'; import Hint from '../../../../admin-x-ds/global/Hint';
import React, {useRef} from 'react'; import React from 'react';
import RecommendationIcon from './RecommendationIcon'; import RecommendationIcon from './RecommendationIcon';
import TextArea from '../../../../admin-x-ds/global/form/TextArea'; import TextArea from '../../../../admin-x-ds/global/form/TextArea';
import TextField from '../../../../admin-x-ds/global/form/TextField'; import TextField from '../../../../admin-x-ds/global/form/TextField';
@ -20,7 +20,6 @@ interface Props<T extends EditOrAddRecommendation> {
const RecommendationReasonForm: React.FC<Props<EditOrAddRecommendation | Recommendation>> = ({showURL, formState, updateForm, errors, clearError}) => { const RecommendationReasonForm: React.FC<Props<EditOrAddRecommendation | Recommendation>> = ({showURL, formState, updateForm, errors, clearError}) => {
const [reasonLength, setReasonLength] = React.useState(formState?.reason?.length || 0); const [reasonLength, setReasonLength] = React.useState(formState?.reason?.length || 0);
const reasonLengthColor = reasonLength > 200 ? 'text-red' : 'text-green'; const reasonLengthColor = reasonLength > 200 ? 'text-red' : 'text-green';
const focusRef = useRef<HTMLTextAreaElement>(null);
return <Form return <Form
marginBottom={false} marginBottom={false}
marginTop marginTop
@ -53,6 +52,7 @@ const RecommendationReasonForm: React.FC<Props<EditOrAddRecommendation | Recomme
/>} />}
<TextField <TextField
autoFocus={true}
error={Boolean(errors.title)} error={Boolean(errors.title)}
hint={errors.title} hint={errors.title}
title="Title" title="Title"
@ -63,11 +63,9 @@ const RecommendationReasonForm: React.FC<Props<EditOrAddRecommendation | Recomme
}} }}
/> />
<TextArea <TextArea
autoFocus={true}
clearBg={true} clearBg={true}
error={Boolean(errors.reason)} error={Boolean(errors.reason)}
hint={errors.reason || <>Max. <strong>200</strong> characters. You&apos;ve used <strong className={reasonLengthColor}>{reasonLength}</strong></>} hint={errors.reason || <>Max. <strong>200</strong> characters. You&apos;ve used <strong className={reasonLengthColor}>{reasonLength}</strong></>}
inputRef={focusRef}
rows={3} rows={3}
title="Short description" title="Short description"
value={formState.reason ?? ''} value={formState.reason ?? ''}