From 95c8957de2976dd837843bc3cc2d09616d1e7286 Mon Sep 17 00:00:00 2001 From: Sam Mazer <162159423+SamMazerIR@users.noreply.github.com> Date: Mon, 3 Jun 2024 12:23:36 -0700 Subject: [PATCH] adding inputRef argument to StringInputProps and StringInput element for new studio. adding auto-focus for search field in elementList/index.tsx (#10306) --- packages/ui/src/components/editor/input/String/index.tsx | 4 +++- .../editor/panels/Properties/elementList/index.tsx | 8 +++++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/ui/src/components/editor/input/String/index.tsx b/packages/ui/src/components/editor/input/String/index.tsx index 4f44d307c6..fe53764c76 100644 --- a/packages/ui/src/components/editor/input/String/index.tsx +++ b/packages/ui/src/components/editor/input/String/index.tsx @@ -31,9 +31,10 @@ export interface StringInputProps extends Omit { value: string onChange?: (value: string) => void onRelease?: (value: string) => void + inputRef?: React.Ref } -const StringInput = ({ value, onChange, onRelease, className, ...rest }: StringInputProps) => { +const StringInput = ({ value, onChange, onRelease, className, inputRef, ...rest }: StringInputProps) => { return ( { onRelease?.(e.target.value) }} + ref={inputRef} {...rest} /> ) diff --git a/packages/ui/src/components/editor/panels/Properties/elementList/index.tsx b/packages/ui/src/components/editor/panels/Properties/elementList/index.tsx index 9cbb57c3c7..5fcf4d1377 100644 --- a/packages/ui/src/components/editor/panels/Properties/elementList/index.tsx +++ b/packages/ui/src/components/editor/panels/Properties/elementList/index.tsx @@ -24,7 +24,7 @@ Ethereal Engine. All Rights Reserved. */ import { startCase } from 'lodash' -import React, { useRef } from 'react' +import React, { useEffect, useRef } from 'react' import { useTranslation } from 'react-i18next' import { Component } from '@etherealengine/ecs/src/ComponentFunctions' @@ -129,6 +129,11 @@ export function ElementList() { const searchTimeout = useRef | null>(null) const shelves = useComponentShelfCategories(search.query.value) + const inputReference = useRef(null) + + useEffect(() => { + inputReference.current?.focus() + }, []) const onSearch = (text: string) => { search.local.set(text) @@ -147,6 +152,7 @@ export function ElementList() { placeholder={t('editor:layout.assetGrid.components-search')} value={search.local.value} onChange={(val) => onSearch(val)} + inputRef={inputReference} />