Material UI - why InputBase ref is undefined

Question

I'm using Material-UI Select component, with Material-UI InputBase to show the values.

I need access for the ref of the ROOT of the Input component, but it's not working and the current of the ref is undefined.

I tried using the prop way: ref={inputRef}

I also tried the callback ref: ref={(ref) => inputRef.current = ref}

nothing works.

to make it clear i need the ref of the root element, not the inner inputRef.

Select component

import Input from '@material-ui/core/InputBase';    

const MySelect = (props) => {
   const inputRef = useRef<any>();

   return (<Select
      input={
        <Input
          ref={inputRef}
          onClick={() => console.log(inputRef.current)} // output: undefined
        />
      }
    >
      {props.menuItems}
    </Select>}

}

EDIT 1 - FROM THE DOCS

Again, i need the ROOT element ref. NOT the inputRef. i need the div wrapping the native input element.

https://material-ui.com/api/input-base/

EDIT 2 - code sandbox

here is a sandbox link to view the issue live: https://codesandbox.io/s/material-demo-forked-olbo2?file=/demo.tsx

Edit 3

it is confirmed by MUI that it is a bug - https://github.com/mui-org/material-ui/issues/27792

Answer 1

ref is only available on native HTML element

For InputBase you will need to access native input ref via inputRef instead of ref.

Reference: here