Repository navigation
fix: match a dataSet value and a dir attribute the way the DOM does - #447
Open
YevheniiKotyrlo wants to merge 1 commit into
Open
YevheniiKotyrlo wants to merge 1 commit into
YevheniiKotyrlo wants to merge 1 commit into
Conversation
This was referenced Sep 10, 2026
Contributor
Author
react-native-web writes a dataSet entry as a data-* attribute for every value but null and undefined, so [data-x] matches data-x="false" in a browser. The runtime treated false as absent there, as it rightly does for a boolean prop, and compared an array value as no value, where the DOM holds its comma-joined text. HTML compares a dir value ASCII case-insensitively, so [dir="RTL"] matches dir="rtl" unless the selector carries the s flag. The compiler emitted the operand as written, and the direction condition never matched it. It now folds the operand unless s is given. Both folds share one ASCII lowercasing helper, which the runtime's i flag also uses.
YevheniiKotyrlo
force-pushed
the
fix/selectors-attribute-matching
branch
from
October 11, 2026 12:35
f910a68 to
5525374
Compare
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
On
main:falsedataSetvalue is absent to[data-x]. react-native-web writes adataSetentry as adata-*attribute for every value exceptnullandundefined(createDOMProps), so[data-test]matchesdataSet={{ test: false }}on the web. The runtime treatsfalseas absent there, as it rightly does for a boolean prop such asdisabled.dataSetvalue compares as no value. The DOM holds the array's comma-joined text, so[data-test="a,b"]matchesdataSet={{ test: ["a", "b"] }}.[dir="RTL"]never matches. HTML compares adirvalue ASCII case-insensitively, so the selector matchesdir="rtl"unless it carries thesflag. The compiler emits the operand as written, and the direction condition compares it literally.Solution
dataSetvalues. AdataSetvalue is present unless it is nullish, and it compares as the text the DOM holds. A plain prop keeps its boolean-attribute rule, sofalseis still absent there.diroperands. The compiler folds adiroperand to lowercase unless the selector carriess.iflag also uses.toLowerCasewould also fold U+212A KELVIN SIGN ontok.Tests
Every case renders as Chromium 153, Firefox 155 and WebKit 26.6 do.
src/__tests__/native/attributes.test.tsx:[data-test]overfalse,0,"",nullandundefined;[disabled]over afalseprop;=and~=over an array value.src/__tests__/compiler/selectors.test.tsxcovers the condition[dir=…]compiles to, in each case and with theiandsflags.src/__tests__/native/direction-media.test.tsxrenders[dir="RTL"],[dir="RTL" i]and[dir="RTL" s]against a right-to-left layout.main, 7 of the 45 cases in these files fail. Each of 7 mutations fails its own cases.Verification
On Windows with Node 26:
yarn lintcleanyarn typecheckcleanyarn test --coverage: every failure also fails onmainon this machine (the four babel cases)yarn buildcleanyarn example expo export --platform webexportedMerge order
dirreads the direction. Whichever lands second keeps this PR's folded operand.Base
Re-written on
main(a5002c5). #451 already answers the rest of Selectors §6 the way this PR did on its old base: exact comparison, whitespace and dash-match boundaries, the empty-operand exclusions and theiflag. Its tests cover those, so this PR no longer carries them.