useRef on Form.Control inside a FloatingLabel not firing focus()

Issue

This Content is from Stack Overflow. Question asked by Zakariae Bou-taleb

When i click on top of the form anywhere, i expect the input to be focused, yet it doesn’t, but if i try to log the ref.current and see if it returns anything, it actually returns the input object, so it’s working good just as far, but the focus won’t fire for some reason, unless i take the Form.Control out of the FLoatingLabel.

const ref = useRef(null);

<Form onClick={() => ref.current.focus()}>
    <Form.Group controlId='_searchControl' className={`_formGroup _searchGroup ${_searchFocused ? 'focused' : ''}`}>
       <FloatingLabel
           controlId='_searchControl'
           label='Search.'
           className='_formLabel'
       >
           <Form.Control placeholder='Search.' autoComplete='new-password' type='text' className='_formControl border border-0 rounded-0' name='_searchControl' value={_searchValue} onChange={(event) => setSearchValue(event.target.value)} onFocus={() => setSearchFocused(true)} onBlur={() => setSearchFocused(false)} ref={ref} />
       </FloatingLabel>
   </Form.Group>
</Form>

i’m assuming the focus() is not working because the input is only created dynamically inside a yet to exist div wrapping the label, because as i have mentioned, once i take the Form.Control to outside the FLoatingLabel, the focus works just fine.



Solution

This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?