Skip to content

[InputBase] Use ref prop instead of inputRef prop on input component#23174

Merged
oliviertassinari merged 11 commits intomui:nextfrom
GuilleDF:update-inputbase-ref
Oct 20, 2020
Merged

[InputBase] Use ref prop instead of inputRef prop on input component#23174
oliviertassinari merged 11 commits intomui:nextfrom
GuilleDF:update-inputbase-ref

Conversation

@GuilleDF
Copy link
Contributor

@GuilleDF GuilleDF commented Oct 20, 2020

Breaking changes

  • [TextField] Change ref forwarding expections on custom inputComponent.
    The component should forward the ref prop instead of the inputRef prop.

    -function NumberFormatCustom(props) {
    -  const { inputRef, onChange, ...other } = props;
    +const NumberFormatCustom = React.forwardRef(function NumberFormatCustom(
    +  props,
    +  ref,
    +) {
      const { onChange, ...other } = props;
    
      return (
        <NumberFormat
          {...other}
    -     getInputRef={inputRef}
    +     getInputRef={ref}

The input component was passed an inputRef prop in order to use refs with custom components. Thanks to React.forwardRef, we can change this to simply use the normal ref prop.

This resolves #22253

@mui-pr-bot
Copy link

mui-pr-bot commented Oct 20, 2020

Details of bundle changes

Generated by 🚫 dangerJS against a59c686

@oliviertassinari oliviertassinari added breaking change Introduces changes that are not backward compatible. scope: text field Changes related to the text field. labels Oct 20, 2020
@GuilleDF
Copy link
Contributor Author

Hmm, not sure why the CI is failing... Any ideas? 😅

@oliviertassinari oliviertassinari merged commit afe7745 into mui:next Oct 20, 2020
@oliviertassinari oliviertassinari added this to the v5 milestone Oct 20, 2020
@oliviertassinari
Copy link
Member

@GuilleDF A flaky test. It's a great first pull request on Material-UI 👌🏻. Thank you for working on it!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

breaking change Introduces changes that are not backward compatible. scope: text field Changes related to the text field.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Got "Does not recognize the 'inputRef' prop" warning after providing TextareaAutosize to OutlinedInput

4 participants