Migration Issue: ref prop now returns StateManager

[Mhbuur]

I just upgraded from v2 to v3 - almost painless, except one issue.

With v2 I retrieve a component reference this way (overall context is that I need to blur the control on close):

<Select ref={ref => this._select = ref} ...

With v3 the ref type changed to StateManager and I get the following error:

Type 'StateManager<any, Select>' is not assignable to type 'HTMLInputElement'

I've looked in the migration notes and I can't find anything about this issue. I found a related discussion about ref not being a prop, but none of the suggestions there seem to work (and the issue is still open): #2181

Am I missing the obvious here - how do I get the input element reference in v3?

[chrisdraws]

I'm also seeing this issue.

[Rall3n]

ref on the default Select import should always be the StateManager, even in v2. You might have imported the base component directly instead of using the default.

The input responsible for handling blur and focus is available under managerRef.select.inputRef.

---

But by default you should not have to manage focus or have to trigger blur by default. The StateManager handles this all by its own.

[chrisdraws]

Thank you. I know this is a little bit off of this topic, but might you aliso know how to select the dropDown menu itself? We are putting it into a portal and I'm having trouble then getting a reference to the menu, from which I want to grab it's dimensions because in some cases it's going off the screen to the left or pushing down into the bottom. We already have menuPlacement="auto" which helps in most cases, but there are some cases in which i need to measure where the menu is actually positioned in reference to the window or modal, and I"m having trouble grabbing a reference when the menu is open in order to measure it. I'm trying to use the onMenuOpen. menuListRef appears to always be unset while select.inputRef and the other ref are being set Any ideas?

…

On Thu, Aug 6, 2020 at 5:17 PM Rall3n ***@***.***> wrote: ref on the default Select import should always be the StateManager, even in v2. You might have imported the base component directly instead of using the default. The input responsible for handling blur and focus is available under managerRef.select.inputRef. ------------------------------ But by default you should not have to manage focus or have to trigger blur by default. The StateManager handles this all by its own. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#3984 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAPSPMN57BSG5RY6CII5GYLR7MMVNANCNFSM4LTKF2DA> .

[ebonow]

@chrisdraws it's currently a known and logged issue that within the scope of onMenuOpen, the menuListRef is null. #4243

The easiest way to get around this is with a timeout to allow the ref to catch up with the state changes.

  const selectRef = useRef();

  const onMenuOpen = () => {
    setTimeout(() => {
      const { menuListRef } = selectRef.current.select;
      // Do stuff with menuListRef
     }, 1);
  };

  return <Select ref={selectRef} onMenuOption={onMenuOption} />

I hope this answers your question. For time being, I will consider this resolved by @Rall3n (Thank you!) and if there are any other questions or concerns, we can re-open this issue. Thanks!