Commit30179ae

authored

fix: apply autofocus to workspace button search (coder#16905)

1 parent4994ba1 commit30179aeCopy full SHA for 30179ae

File tree

+18

-1

lines changed

+18

-1

lines changed

Lines changed: 6 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -20,6 +20,12 @@ type Story = StoryObj<typeof SearchField>;`
`20`	`20`
`21`	`21`	`exportconstEmpty:Story={};`
`22`	`22`
	`23`	`+exportconstFocused:Story={`
	`24`	`+args:{`
	`25`	`+autoFocus:true,`
	`26`	`+},`
	`27`	`+};`
	`28`	`+`
`23`	`29`	`exportconstDefaultValue:Story={`
`24`	`30`	`args:{`
`25`	`31`	`value:"owner:me",`

Lines changed: 11 additions & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -6,19 +6,28 @@ import InputAdornment from "@mui/material/InputAdornment";`
`6`	`6`	`importTextField,{typeTextFieldProps}from"@mui/material/TextField";`
`7`	`7`	`importTooltipfrom"@mui/material/Tooltip";`
`8`	`8`	`importvisuallyHiddenfrom"@mui/utils/visuallyHidden";`
`9`		`-importtype{FC}from"react";`
	`9`	`+import{typeFC,useEffect,useRef}from"react";`
`10`	`10`
`11`	`11`	`exporttypeSearchFieldProps=Omit<TextFieldProps,"onChange">&{`
`12`	`12`	`onChange:(query:string)=>void;`
	`13`	`+autoFocus?:boolean;`
`13`	`14`	`};`
`14`	`15`
`15`	`16`	`exportconstSearchField:FC<SearchFieldProps>=({`
`16`	`17`	`value="",`
`17`	`18`	`onChange,`
	`19`	`+autoFocus=false,`
`18`	`20`	`InputProps,`
`19`	`21`	`...textFieldProps`
`20`	`22`	`})=>{`
`21`	`23`	`consttheme=useTheme();`
	`24`	`+constinputRef=useRef<HTMLInputElement>(null);`
	`25`	`+`
	`26`	`+if(autoFocus){`
	`27`	`+useEffect(()=>{`
	`28`	`+inputRef.current?.focus();`
	`29`	`+});`
	`30`	`+}`
`22`	`31`	`return(`
`23`	`32`	`<TextField`
`24`	`33`	// Specifying `minWidth` so that the text box can't shrink so much
`@@ -27,6 +36,7 @@ export const SearchField: FC<SearchFieldProps> = ({`
`27`	`36`	`size="small"`
`28`	`37`	`value={value}`
`29`	`38`	`onChange={(e)=>onChange(e.target.value)}`
	`39`	`+inputRef={inputRef}`
`30`	`40`	`InputProps={{`
`31`	`41`	`startAdornment:(`
`32`	`42`	`<InputAdornmentposition="start">`

Lines changed: 1 addition & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -69,6 +69,7 @@ export const WorkspacesButton: FC<WorkspacesButtonProps> = ({`
`69`	`69`	`>`
`70`	`70`	`<MenuSearch`
`71`	`71`	`value={searchTerm}`
	`72`	`+autoFocus={true}`
`72`	`73`	`onChange={setSearchTerm}`
`73`	`74`	`placeholder="Type/select a workspace template"`
`74`	`75`	`aria-label="Template select for workspace"`

Comments

(0)