Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix enterKeyHint dom prop #1707

Closed
wants to merge 1 commit into from

Conversation

janicduplessis
Copy link
Contributor

React warns about this prop since it should be enterKeyHint instead of the DOM capitalization enterkeyhint.

image

Tested that the prop is properly set in the DOM after this change.

image

@necolas
Copy link
Owner

necolas commented Aug 21, 2020

Please can you include a test case? This error gets printed in the unit tests with this patch:
https://travis-ci.org/github/necolas/react-native-web/builds/718774621

   console.error node_modules/react-dom/cjs/react-dom.development.js:558
      Warning: React does not recognize the `enterKeyHint` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `enterkeyhint` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
          in input (created by TextInput)
          in TextInput

@janicduplessis
Copy link
Contributor Author

Oh I see, looks like it was only added in react@17, facebook/react#18634. Not sure what would be the proper way to support both versions.

@necolas
Copy link
Owner

necolas commented Aug 21, 2020

It's just a React warning and there's no functional consequence though, right?

@janicduplessis
Copy link
Contributor Author

Not sure, I'll check to see if the prop still shows up in the DOM when using the enterkeyhint form in react 17.

@ahummel25
Copy link

Any plans to merge this in soon?

@necolas
Copy link
Owner

necolas commented Oct 27, 2020

No, because then the warning will appear in React 16. This change will probably go into 0.15 which will make React 17 the peer dependency.

@necolas necolas modified the milestones: 0.13, 0.15 Oct 27, 2020
@hosseinmd
Copy link
Contributor

On this commit facebook/react@feb134c enterKeyHint added to react-dom standard names.

@georgii-ivanov
Copy link

Getting this error with:

"react-native-web": "~0.14.7",
"react": "17.0.1",
"react-dom": "17.0.1",
"styled-components": "^5.2.1",
Warning: Invalid DOM property `enterkeyhint`. Did you mean `enterKeyHint`?
    at input
    at TextInput (webpack-internal:///./node_modules/react-native-web/dist/exports/TextInput/index.js:108:37)
    at StyledNativeComponent (webpack-internal:///./node_modules/styled-components/native/dist/styled-components.native.esm.js:3926:29)
    at Styled(TextInput)
    at div
    at View (webpack-internal:///./node_modules/react-native-web/dist/exports/View/index.js:75:24)
    at StyledNativeComponent (webpack-internal:///./node_modules/styled-components/native/dist/styled-components.native.esm.js:3926:29)
    at Styled(View)
    at div
    at View (webpack-internal:///./node_modules/react-native-web/dist/exports/View/index.js:75:24)
    at StyledNativeComponent (webpack-internal:///./node_modules/styled-components/native/dist/styled-components.native.esm.js:3926:29)
    at Styled(View)
    at Header (webpack-internal:///./components/common/Header.tsx:15:5205)
    at div
    at View (webpack-internal:///./node_modules/react-native-web/dist/exports/View/index.js:75:24)
    at StyledNativeComponent (webpack-internal:///./node_modules/styled-components/native/dist/styled-components.native.esm.js:3926:29)
    at Styled(View)
    at Layout (webpack-internal:///./components/common/Layout.tsx:14:517)
    at HomePage (webpack-internal:///./pages/index.tsx:21:4356)
    at ApolloProvider (webpack-internal:///./node_modules/@apollo/client/react/context/ApolloProvider.js:11:21)
    at withApollo(HomePage) (webpack-internal:///./utils/apollo.tsx:18:1193)
    at IntlProvider (webpack-internal:///./node_modules/react-intl/lib/src/components/provider.js:82:47)
    at App (webpack-internal:///./pages/_app.tsx:10:1161)
    at ErrorBoundary (webpack-internal:///./node_modules/next/node_modules/@next/react-dev-overlay/lib/internal/ErrorBoundary.js:23:47)
    at ReactDevOverlay (webpack-internal:///./node_modules/next/node_modules/@next/react-dev-overlay/lib/internal/ReactDevOverlay.js:73:23)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:1:6584)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:1:14825)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:1:17281)

@georgii-ivanov
Copy link

I see your fix from PR is really relevant.
Could you please upgrade react-natve-web package in npm?

@namnm
Copy link

namnm commented Nov 18, 2020

This PR is good. When we could merge this?

@brunolemos
Copy link
Contributor

If you do console.log(React.version) it prints 17.0.1, so maybe you can check the version to make this PR backwards compatible?

@wbasmi
Copy link

wbasmi commented Dec 15, 2020

Any update about this issue?

@thebigredgeek
Copy link

Can we get this merged please?

@5Heinzelmann
Copy link

It would be great to get this merged :)

@necolas
Copy link
Owner

necolas commented Feb 4, 2021

This change will probably go into 0.15 which will make React 17 the peer dependency.

Repository owner locked and limited conversation to collaborators Feb 4, 2021
@necolas necolas closed this in 5e222db Feb 12, 2021
@janicduplessis janicduplessis deleted the patch-1 branch February 12, 2021 20:49
rnike pushed a commit to VeryBuy/react-native-web that referenced this pull request Sep 13, 2022
React 17 added support for this prop so it now requires a camelCase form.

Close necolas#1707
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

10 participants