Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -05:00
Code Issues Activity

Added auto focus to input field in Admin X DS

Browse source 
refs. https://github.com/TryGhost/Team/issues/3150
This commit is contained in:
Peter Zimon 2023-05-17 16:10:38 +02:00
parent d7cf8f0a65
commit e880cae1d2
2 changed files with 13 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
ghost/admin-x-settings/src/admin-x-ds/global/TextField.tsx
View file

@ -3,6 +3,7 @@ import React from 'react';
import Heading from './Heading';
interface ITextField {
inputRef?: React.RefObject<HTMLInputElement>;
title?: string;
value?: string;
placeholder?: string;
@ -10,15 +11,16 @@ interface ITextField {
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
}
const TextField: React.FC<ITextField> = ({title, value, placeholder, help, onChange, ...props}) => {
const TextField: React.FC<ITextField> = ({inputRef, title, value, placeholder, help, onChange, ...props}) => {
return (
<div className='flex flex-col'>
{title && <Heading formLabel={true} grey={true}>{title}</Heading>}
<input
ref={inputRef}
className='-m-1 border-b border-grey-300 px-1 py-2 focus:border-grey-900'
placeholder={placeholder}
type='text'
value={value}
value={value}
onChange={onChange}
{...props} />
<span className='mt-2 inline-block text-xs text-grey-700'>{help}</span>

10
ghost/admin-x-settings/src/components/settings/general/TitleAndDescription.tsx
View file

@ -1,5 +1,5 @@
import ButtonGroup from '../../../admin-x-ds/global/ButtonGroup';
import React, {useState} from 'react';
import React, {useEffect, useRef, useState} from 'react';
import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
import SettingGroupHeader from '../../../admin-x-ds/settings/SettingGroupHeader';
import SettingGroupInputs from '../../../admin-x-ds/settings/SettingGroupInputs';
@ -13,6 +13,13 @@ const TitleAndDescription: React.FC = () => {
const [isEdited, setIsEdited] = useState(false);
const [siteTitle, setSiteTitleValue] = useState(`Dr. Evil's secret volcano lair`);
const [siteDescription, setSiteDescriptionValue] = useState(`I'm doing this for fun`);
const siteTitleRef = useRef<HTMLInputElement>(null);
useEffect(() => {
if (isEditMode && siteTitleRef.current) {
siteTitleRef.current.focus();
}
}, [isEditMode]);
const handleEditClick = () => {
setIsEditMode(true);
@ -72,6 +79,7 @@ const TitleAndDescription: React.FC = () => {
<SettingGroupInputs columns={2}>
<TextField
help="The name of your site"
inputRef={siteTitleRef}
placeholder="Site title"
title="Site title"
value={siteTitle}