Rmwc: autoFocus on Select throws TypeError

[jordoh]

When adding autoFocus to a Select:

      <Select
        label="Standard"
        options={["Cookies", "Pizza", "Icecream"]}
        autoFocus
      />

an exception is thrown:

Uncaught TypeError: Cannot read property 'handleFocus' of undefined
    at SelectBase.handleFocus (VM6984 index.js:417)
    at HTMLUnknownElement.callCallback (VM7030 react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (VM7030 react-dom.development.js:199)
    at invokeGuardedCallback (VM7030 react-dom.development.js:256)
    at invokeGuardedCallbackAndCatchFirstError (VM7030 react-dom.development.js:270)

https://codesandbox.io/embed/yp8kr097qz

This does not appear to happen for TextField, but for many components, autoFocus appears to trigger the handleFocus callback before the foundation has been initialized.

I've also run into this general class of issue using LineRipple directly:

onFocus = () => {
  if (this._lineRipple) this._lineRipple.foundation_.activate();
  // ...
};

render() {
  return (
    <div onFocus={ this.onFocus }>
      <textarea />
      <LineRipple ref={ lineRipple => this.lineRipple = lineRipple } />
    </div
  );
}

I'm making a big jump from RMWC 3.x where this code previously worked, but it seems like the foundation is now initialized at a later point.

[jamesmfriedman]

Thanks for reporting this. I’ll take a pass through and make sure all form based components allow autoFocus and back it up with some tests.

[eleith]

i have component with a TextField that does trigger TypeError: Cannot read property 'handleFocus' of undefined

[jamesmfriedman]

fixed in 5.4.0

Oddly enough, I added some tests prior to fixing it and could never get them to fail, but the issue is indeed fixed now.