RTL affects vertical cross axis offsets for popper

[ling1726]

Environment Information

• Package version(s): v9 and v0

Please provide a reproduction of the bug in a codepen:

https://codesandbox.io/s/elastic-banach-78uu1p?file=/example.tsx

Actual behavior:

The current offset modifier used in usePopper will always invert the offset of the cross axis for all placements.

fluentui/packages/react-positioning/src/usePopper.ts

Lines 81 to 90 in f8cf163

	const offsetModifier = React.useMemo(
	() =>
	offset
	? {
	name: 'offset',
	options: { offset: isRtl ? applyRtlToOffset(offset) : offset },
	}
	: null,
	[offset, isRtl],
	);

This means that even if the cross axis is vertical, the offset is inverted in RTL.

Expected behavior:

If the cross axis is vertical, then offset should be unchanged.

Priorities and help requested:

Are you willing to submit a PR to fix? Yes

Requested priority: Normal

Products/sites affected: (if applicable)

[ling1726]

Will be easier to fix with Floating UI in #21828 since middleware can be wrapped.

Fixing this with Popper v2 involves writing an extra modifier or rewriting the offset modifier

[atomiks]

FWIW Floating UI will handle all of this by default in the next version 😄 and it's coming up to a fully stable v1 release very soon. RTL, alignments and offsets will work logically rather than physically as expected.

[ling1726]

FWIW Floating UI will handle all of this by default in the next version 😄 and it's coming up to a fully stable v1 release very soon. RTL, alignments and offsets will work logically rather than physically as expected.

Thx for the tip @atomiks, I see some code in the Floating UI repo dealing with rtl... Just a QQ what is logically vs physically here ?

[atomiks]

"Logical" means it's not based on hardcoded physical properties like top, left, right, etc. It will adapt based on writing mode/language direction, alignment, etc in an intuitive way.

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties
• Direction-agnostic placement values floating-ui/floating-ui#1549

[ling1726]

"Logical" means it's not based on hardcoded physical properties like top, left, right, etc. It will adapt based on writing mode/language direction, alignment, etc in an intuitive way.

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties
• Direction-agnostic placement values floating-ui/floating-ui#1549

Ah ok, that's more or less what we've wrapped around Popper, good to see it's getting first class support :)