Skip to content
This repository has been archived by the owner on Aug 21, 2024. It is now read-only.

Commit

Permalink
adding inputRef argument to StringInputProps and StringInput element …
Browse files Browse the repository at this point in the history
…for new studio. adding auto-focus for search field in elementList/index.tsx (#10306)
  • Loading branch information
SamMazerIR authored Jun 3, 2024
1 parent fa126cf commit 95c8957
Show file tree
Hide file tree
Showing 2 changed files with 10 additions and 2 deletions.
4 changes: 3 additions & 1 deletion packages/ui/src/components/editor/input/String/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,10 @@ export interface StringInputProps extends Omit<InputProps, 'onChange'> {
value: string
onChange?: (value: string) => void
onRelease?: (value: string) => void
inputRef?: React.Ref<any>
}

const StringInput = ({ value, onChange, onRelease, className, ...rest }: StringInputProps) => {
const StringInput = ({ value, onChange, onRelease, className, inputRef, ...rest }: StringInputProps) => {
return (
<Input
containerClassname="w-50 h-7 bg-[#1A1A1A] rounded"
Expand All @@ -51,6 +52,7 @@ const StringInput = ({ value, onChange, onRelease, className, ...rest }: StringI
onFocus={(e) => {
onRelease?.(e.target.value)
}}
ref={inputRef}
{...rest}
/>
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -129,6 +129,11 @@ export function ElementList() {
const searchTimeout = useRef<ReturnType<typeof setTimeout> | null>(null)

const shelves = useComponentShelfCategories(search.query.value)
const inputReference = useRef<HTMLInputElement>(null)

useEffect(() => {
inputReference.current?.focus()
}, [])

const onSearch = (text: string) => {
search.local.set(text)
Expand All @@ -147,6 +152,7 @@ export function ElementList() {
placeholder={t('editor:layout.assetGrid.components-search')}
value={search.local.value}
onChange={(val) => onSearch(val)}
inputRef={inputReference}
/>
</div>
</div>
Expand Down

0 comments on commit 95c8957

Please sign in to comment.