Skip to content

Commit 1f37855

Browse files
ToMESSKaToMESSKa
committed
docs(ui-select): fix_focus_input_function_in_select_examples
INSTUI-4539
1 parent f8229df commit 1f37855

File tree

1 file changed

+42
-42
lines changed

1 file changed

+42
-42
lines changed

‎packages/ui-select/src/Select/README.md‎

Lines changed: 42 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@ describes: Select
2929
inputElement = null
3030

3131
focusInput = () => {
32-
this.inputElement.blur()
3332
if (this.inputElement) {
33+
this.inputElement.blur()
3434
this.inputElement.focus()
3535
}
3636
}
@@ -170,12 +170,12 @@ describes: Select
170170
const [highlightedOptionId, setHighlightedOptionId] = useState(null)
171171
const [selectedOptionId, setSelectedOptionId] = useState(options[0].id)
172172
const [announcement, setAnnouncement] = useState(null)
173-
const [inputElement, setInputElement] = useState(null)
173+
const inputRef = useRef()
174174

175175
const focusInput = () => {
176-
inputElement.blur()
177-
if (inputElement) {
178-
inputElement.focus()
176+
if (inputRef.current) {
177+
inputRef.current.blur()
178+
inputRef.current.focus()
179179
}
180180
}
181181

@@ -233,7 +233,7 @@ describes: Select
233233
onRequestHighlightOption={handleHighlightOption}
234234
onRequestSelectOption={handleSelectOption}
235235
inputRef={(el) => {
236-
setInputElement(el)
236+
inputRef.current = el
237237
}}
238238
>
239239
{options.map((option) => {
@@ -330,8 +330,8 @@ It's best practice to always provide autocomplete functionality to help users ma
330330
}
331331

332332
focusInput = () => {
333-
this.inputElement.blur()
334333
if (this.inputElement) {
334+
this.inputElement.blur()
335335
this.inputElement.focus()
336336
}
337337
}
@@ -535,12 +535,12 @@ It's best practice to always provide autocomplete functionality to help users ma
535535
const [selectedOptionId, setSelectedOptionId] = useState(null)
536536
const [filteredOptions, setFilteredOptions] = useState(options)
537537
const [announcement, setAnnouncement] = useState(null)
538-
const [inputElement, setInputElement] = useState(null)
538+
const inputRef = useRef()
539539

540540
const focusInput = () => {
541-
inputElement.blur()
542-
if (inputElement) {
543-
inputElement.focus()
541+
if (inputRef.current) {
542+
inputRef.current.blur()
543+
inputRef.current.focus()
544544
}
545545
}
546546

@@ -666,7 +666,7 @@ It's best practice to always provide autocomplete functionality to help users ma
666666
renderBeforeInput={<IconUserSolid inline={false} />}
667667
renderAfterInput={<IconSearchLine inline={false} />}
668668
inputRef={(el) => {
669-
setInputElement(el)
669+
inputRef.current = el
670670
}}
671671
>
672672
{filteredOptions.length > 0 ? (
@@ -748,8 +748,8 @@ To mark an option as "highlighted", use the option's `isHighlighted` prop. Note
748748
inputRef = null
749749

750750
focusInput = () => {
751-
this.inputRef.blur()
752751
if (this.inputRef) {
752+
this.inputRef.blur()
753753
this.inputRef.focus()
754754
}
755755
}
@@ -1014,12 +1014,12 @@ To mark an option as "highlighted", use the option's `isHighlighted` prop. Note
10141014
const [selectedOptionId, setSelectedOptionId] = useState(['opt1', 'opt6'])
10151015
const [filteredOptions, setFilteredOptions] = useState(options)
10161016
const [announcement, setAnnouncement] = useState(null)
1017-
const [inputElement, setInputElement] = useState(null)
1017+
const inputRef = useRef()
10181018

10191019
const focusInput = () => {
1020-
inputElement.blur()
1021-
if (inputElement) {
1022-
inputElement.focus()
1020+
if (inputRef.current) {
1021+
inputRef.current.blur()
1022+
inputRef.current.focus()
10231023
}
10241024
}
10251025

@@ -1166,7 +1166,7 @@ To mark an option as "highlighted", use the option's `isHighlighted` prop. Note
11661166
inputValue={inputValue}
11671167
isShowingOptions={isShowingOptions}
11681168
inputRef={(el) => {
1169-
setInputElement(el)
1169+
inputRef.current = el
11701170
}}
11711171
onBlur={handleBlur}
11721172
onInputChange={handleInputChange}
@@ -1251,8 +1251,8 @@ In addition to `<Select.Option />` Select also accepts `<Select.Group />` as chi
12511251
inputElement = null
12521252

12531253
focusInput = () => {
1254-
this.inputElement.blur()
12551254
if (this.inputElement) {
1255+
this.inputElement.blur()
12561256
this.inputElement.focus()
12571257
}
12581258
}
@@ -1449,12 +1449,12 @@ In addition to `<Select.Option />` Select also accepts `<Select.Group />` as chi
14491449
options['Western'][0].id
14501450
)
14511451
const [announcement, setAnnouncement] = useState(null)
1452-
const [inputElement, setInputElement] = useState(null)
1452+
const inputRef = useRef()
14531453

14541454
const focusInput = () => {
1455-
inputElement.blur()
1456-
if (inputElement) {
1457-
inputElement.focus()
1455+
if (inputRef.current) {
1456+
inputRef.current.blur()
1457+
inputRef.current.focus()
14581458
}
14591459
}
14601460

@@ -1576,7 +1576,7 @@ In addition to `<Select.Option />` Select also accepts `<Select.Group />` as chi
15761576
/>
15771577
}
15781578
inputRef={(el) => {
1579-
setInputElement(el)
1579+
inputRef.current = el
15801580
}}
15811581
>
15821582
{renderGroup()}
@@ -1632,8 +1632,8 @@ Due to a WebKit bug if you are using `Select.Group` with autocomplete, the scree
16321632
inputElement = null
16331633

16341634
focusInput = () => {
1635-
this.inputElement.blur()
16361635
if (this.inputElement) {
1636+
this.inputElement.blur()
16371637
this.inputElement.focus()
16381638
}
16391639
}
@@ -1817,12 +1817,12 @@ Due to a WebKit bug if you are using `Select.Group` with autocomplete, the scree
18171817
const [selectedOptionId, setSelectedOptionId] = useState(null)
18181818
const [filteredOptions, setFilteredOptions] = useState(options)
18191819
const [announcement, setAnnouncement] = useState(null)
1820-
const [inputElement, setInputElement] = useState(null)
1820+
const inputRef = useRef()
18211821

18221822
const focusInput = () => {
1823-
inputElement.blur()
1824-
if (inputElement) {
1825-
inputElement.focus()
1823+
if (inputRef.current) {
1824+
inputRef.current.blur()
1825+
inputRef.current.focus()
18261826
}
18271827
}
18281828

@@ -1935,7 +1935,7 @@ Due to a WebKit bug if you are using `Select.Group` with autocomplete, the scree
19351935
onRequestHighlightOption={handleHighlightOption}
19361936
onRequestSelectOption={handleSelectOption}
19371937
inputRef={(el) => {
1938-
setInputElement(el)
1938+
inputRef.current = el
19391939
}}
19401940
>
19411941
{renderGroup()}
@@ -1987,8 +1987,8 @@ If no results match the user's search, it's recommended to leave `isShowingOptio
19871987
inputElement = null
19881988

19891989
focusInput = () => {
1990-
this.inputElement.blur()
19911990
if (this.inputElement) {
1991+
this.inputElement.blur()
19921992
this.inputElement.focus()
19931993
}
19941994
}
@@ -2217,12 +2217,12 @@ If no results match the user's search, it's recommended to leave `isShowingOptio
22172217
const [selectedOptionLabel, setSelectedOptionLabel] = useState('')
22182218
const [filteredOptions, setFilteredOptions] = useState([])
22192219
const [announcement, setAnnouncement] = useState(null)
2220-
const [inputElement, setInputElement] = useState(null)
2220+
const inputRef = useRef()
22212221

22222222
const focusInput = () => {
2223-
inputElement.blur()
2224-
if (inputElement) {
2225-
inputElement.focus()
2223+
if (inputRef.current) {
2224+
inputRef.current.blur()
2225+
inputRef.current.focus()
22262226
}
22272227
}
22282228

@@ -2341,7 +2341,7 @@ If no results match the user's search, it's recommended to leave `isShowingOptio
23412341
onRequestHighlightOption={handleHighlightOption}
23422342
onRequestSelectOption={handleSelectOption}
23432343
inputRef={(el) => {
2344-
setInputElement(el)
2344+
inputRef.current = el
23452345
}}
23462346
>
23472347
{filteredOptions.length > 0 ? (
@@ -2425,8 +2425,8 @@ To display icons (or other elements) before or after an option, pass it via the
24252425
inputElement = null
24262426

24272427
focusInput = () => {
2428-
this.inputElement.blur()
24292428
if (this.inputElement) {
2429+
this.inputElement.blur()
24302430
this.inputElement.focus()
24312431
}
24322432
}
@@ -2572,12 +2572,12 @@ To display icons (or other elements) before or after an option, pass it via the
25722572
const [highlightedOptionId, setHighlightedOptionId] = useState(null)
25732573
const [selectedOptionId, setSelectedOptionId] = useState(options[0].id)
25742574
const [announcement, setAnnouncement] = useState(null)
2575-
const [inputElement, setInputElement] = useState(null)
2575+
const inputRef = useRef()
25762576

25772577
const focusInput = () => {
2578-
inputElement.blur()
2579-
if (inputElement) {
2580-
inputElement.focus()
2578+
if (inputRef.current) {
2579+
inputRef.current.blur()
2580+
inputRef.current.focus()
25812581
}
25822582
}
25832583

@@ -2635,7 +2635,7 @@ To display icons (or other elements) before or after an option, pass it via the
26352635
onRequestHighlightOption={handleHighlightOption}
26362636
onRequestSelectOption={handleSelectOption}
26372637
inputRef={(el) => {
2638-
setInputElement(el)
2638+
inputRef.current = el
26392639
}}
26402640
>
26412641
{options.map((option) => {

0 commit comments

Comments
 (0)