diff --git a/packages/studio/src/components/NewComposition/RenameComposition.tsx b/packages/studio/src/components/NewComposition/RenameComposition.tsx index aad47d42f70..909a430ca92 100644 --- a/packages/studio/src/components/NewComposition/RenameComposition.tsx +++ b/packages/studio/src/components/NewComposition/RenameComposition.tsx @@ -1,6 +1,13 @@ import type {RecastCodemod} from '@remotion/studio-shared'; import type {ChangeEventHandler} from 'react'; -import React, {useCallback, useContext, useMemo, useState} from 'react'; +import React, { + useCallback, + useContext, + useEffect, + useMemo, + useRef, + useState, +} from 'react'; import {Internals} from 'remotion'; import {validateCompositionName} from '../../helpers/validate-new-comp-data'; import {Spacing} from '../layout'; @@ -37,6 +44,13 @@ const RenameCompositionLoaded: React.FC<{}> = () => { const [newId, setName] = useState(() => { return resolved.result.id; }); + const inputRef = useRef(null); + + useEffect(() => { + const input = inputRef.current; + if (!input) return; + input.select(); + }, []); const onNameChange: ChangeEventHandler = useCallback( (e) => { @@ -74,6 +88,7 @@ const RenameCompositionLoaded: React.FC<{}> = () => {
= ({folderName, parentName, stack}) => { const {folders} = useContext(Internals.CompositionManager); const [newName, setName] = useState(folderName); + const inputRef = useRef(null); + + useEffect(() => { + const input = inputRef.current; + if (!input) return; + input.select(); + }, []); const onNameChange: ChangeEventHandler = useCallback( (e) => { @@ -70,6 +84,7 @@ export const RenameFolder: React.FC<{
getBaseName(relativePath)); const [submitting, setSubmitting] = useState(false); + const inputRef = useRef(null); + + useEffect(() => { + const input = inputRef.current; + if (!input) return; + const dotIndex = newName.lastIndexOf('.'); + const stemEnd = dotIndex === -1 ? newName.length : dotIndex; + input.setSelectionRange(0, stemEnd); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); const parent = useMemo(() => getParent(relativePath), [relativePath]); const newRelativePath = useMemo(() => { @@ -141,6 +158,7 @@ export const RenameStaticFileModal: React.FC<{