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.

Sign up for GitHub

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

Jump to bottom

Bug: <img fetchPriority> attribute is not supported #25682

Closed
iamakulov opened this issue Nov 15, 2022 · 3 comments · Fixed by #25927
Closed

Bug: <img fetchPriority> attribute is not supported #25682

iamakulov opened this issue Nov 15, 2022 · 3 comments · Fixed by #25927
Labels
Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug

Comments

@iamakulov
Copy link

React version: 18.0.0

Steps To Reproduce

  1. Render an <img src="#" fetchPriority="high" /> tag

Link to code example: https://playcode.io/1011424

The current behavior

A warning is logged:

Warning: React does not recognize the `fetchPriority` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `fetchpriority` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    at img
    at div
    at App

The expected behavior

React should recognize the fetchPriority prop and emit it as fetchpriority into HTML.

To be clear, using <img fetchpriority="high"> works and doesn’t log a warning. However, it is inconsistent with other DOM APIs. In the JS DOM API, the attribute is camel-cased as HTMLImageElement.fetchPriority.

fetchPriority has been supported in Chromium browsers since Chromium 101 (Apr 26, 2022). Per Patrick Meenan, Mozilla is working on an implementation as well.
@iamakulov iamakulov added the Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug label Nov 15, 2022
@iamakulov iamakulov mentioned this issue Nov 15, 2022
Closed
7 tasks
@Semigradsky
Copy link

Also HTMLIFrameElement.fetchPriority and HTMLLinkElement.fetchPriority

@Semigradsky
Copy link

Any news?

This was referenced Dec 22, 2022
Closed
Merged
sebmarkbage pushed a commit that referenced this issue Dec 23, 2022
@styfle @eps1lon
Add fetchPriority to <img> and <link> (#25927)
de7d1c9 
<!--
  Thanks for submitting a pull request!
We appreciate you spending the time to work on these changes. Please
provide enough information so that others can review your pull request.
The three fields below are mandatory.

Before submitting a pull request, please make sure the following is
done:

1. Fork [the repository](https:/facebook/react) and create
your branch from `main`.
  2. Run `yarn` in the repository root.
3. If you've fixed a bug or added code that should be tested, add tests!
4. Ensure the test suite passes (`yarn test`). Tip: `yarn test --watch
TestName` is helpful in development.
5. Run `yarn test --prod` to test in the production environment. It
supports the same options as `yarn test`.
6. If you need a debugger, run `yarn debug-test --watch TestName`, open
`chrome://inspect`, and press "Inspect".
7. Format your code with
[prettier](https:/prettier/prettier) (`yarn prettier`).
8. Make sure your code lints (`yarn lint`). Tip: `yarn linc` to only
check changed files.
  9. Run the [Flow](https://flowtype.org/) type checks (`yarn flow`).
  10. If you haven't already, complete the CLA.

Learn more about contributing:
https://reactjs.org/docs/how-to-contribute.html
-->

## Summary

- Fixes #25682

## How did you test this change?

I tried this but it didn't work
```
yarn build --type=UMD_DEV react/index,react-dom && cd fixtures/attribute-behavior && yarn install && yarn start
```

Co-authored-by: eps1lon <[email protected]>
github-actions bot pushed a commit that referenced this issue Dec 23, 2022
@sebmarkbage
Add fetchPriority to <img> and <link> (#25927)
f96c1b8 
<!--
  Thanks for submitting a pull request!
We appreciate you spending the time to work on these changes. Please
provide enough information so that others can review your pull request.
The three fields below are mandatory.

Before submitting a pull request, please make sure the following is
done:

1. Fork [the repository](https:/facebook/react) and create
your branch from `main`.
  2. Run `yarn` in the repository root.
3. If you've fixed a bug or added code that should be tested, add tests!
4. Ensure the test suite passes (`yarn test`). Tip: `yarn test --watch
TestName` is helpful in development.
5. Run `yarn test --prod` to test in the production environment. It
supports the same options as `yarn test`.
6. If you need a debugger, run `yarn debug-test --watch TestName`, open
`chrome://inspect`, and press "Inspect".
7. Format your code with
[prettier](https:/prettier/prettier) (`yarn prettier`).
8. Make sure your code lints (`yarn lint`). Tip: `yarn linc` to only
check changed files.
  9. Run the [Flow](https://flowtype.org/) type checks (`yarn flow`).
  10. If you haven't already, complete the CLA.

Learn more about contributing:
https://reactjs.org/docs/how-to-contribute.html
-->

## Summary

- Fixes #25682

## How did you test this change?

I tried this but it didn't work
```
yarn build --type=UMD_DEV react/index,react-dom && cd fixtures/attribute-behavior && yarn install && yarn start
```

Co-authored-by: eps1lon <[email protected]>

DiffTrain build for [de7d1c9](de7d1c9)
[View git log for this commit](https:/facebook/react/commits/de7d1c90718ea8f4844a2219991f7115ef2bd2c5)
@Netail Netail mentioned this issue Aug 8, 2023
Closed
17 tasks
jerrydev0927 added a commit to jerrydev0927/react that referenced this issue Jan 5, 2024
@jerrydev0927
Add fetchPriority to <img> and <link> (#25927)
5b19740 
<!--
  Thanks for submitting a pull request!
We appreciate you spending the time to work on these changes. Please
provide enough information so that others can review your pull request.
The three fields below are mandatory.

Before submitting a pull request, please make sure the following is
done:

1. Fork [the repository](https:/facebook/react) and create
your branch from `main`.
  2. Run `yarn` in the repository root.
3. If you've fixed a bug or added code that should be tested, add tests!
4. Ensure the test suite passes (`yarn test`). Tip: `yarn test --watch
TestName` is helpful in development.
5. Run `yarn test --prod` to test in the production environment. It
supports the same options as `yarn test`.
6. If you need a debugger, run `yarn debug-test --watch TestName`, open
`chrome://inspect`, and press "Inspect".
7. Format your code with
[prettier](https:/prettier/prettier) (`yarn prettier`).
8. Make sure your code lints (`yarn lint`). Tip: `yarn linc` to only
check changed files.
  9. Run the [Flow](https://flowtype.org/) type checks (`yarn flow`).
  10. If you haven't already, complete the CLA.

Learn more about contributing:
https://reactjs.org/docs/how-to-contribute.html
-->

## Summary

- Fixes facebook/react#25682

## How did you test this change?

I tried this but it didn't work
```
yarn build --type=UMD_DEV react/index,react-dom && cd fixtures/attribute-behavior && yarn install && yarn start
```

Co-authored-by: eps1lon <[email protected]>

DiffTrain build for [de7d1c90718ea8f4844a2219991f7115ef2bd2c5](facebook/react@de7d1c9)
[View git log for this commit](https:/facebook/react/commits/de7d1c90718ea8f4844a2219991f7115ef2bd2c5)
@chadlinden chadlinden mentioned this issue Apr 30, 2024
Closed
@acatzk
Copy link

acatzk commented May 23, 2024

Any news?

@suwonthugger suwonthugger mentioned this issue Jun 12, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add fetchPriority to <img> and <link> styfle/react
3 participants
@Semigradsky @iamakulov @acatzk