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!: do not override dir attribute on the overlay to rely on DirMixin #7677

Merged
merged 3 commits into from
Aug 21, 2024

Conversation

web-padawan
Copy link
Member

@web-padawan web-padawan commented Aug 20, 2024

Description

Fixes #7676

This removes logic for setting dir based on computedStyle.direction - originally this line was added in #2567 when updating vaadin-date-picker to use PositionMixin (previously, date-picker was setting dir to the inputElement direction which was introduced long ago in vaadin/vaadin-date-picker#584).

Setting dir this way is problematic since it overrides dir attribute propagation from the <html> element which is performed by DirMixin. As a result, once dir is set to ltr it can't be changed to rtl upon overlay re-opening. In fact, the current tests just don't verify the value of the dir attribute set on the overlay.

This PR removes the line so that we could rely on the DirMixin instead, and updates RTL tests accordingly so that we don't close and reopen overlay in these tests and rely on dir attribute being updated.

Note, manual updatePosition() is used in the tests to align with other tests below and because the target is absolutely positioned, so it's not moved when dir updated to RTL (which would generally be the case in the real world apps).

Type of change

  • Bugfix

Note

Marked as behavior altering fix since this change involves removal of dir='ltr' set by default from some overlay based components (see snapshots) and in theory some custom styles might rely on it, as did Material theme in 1 place.

@web-padawan
Copy link
Member Author

Looks like Material theme of the date-picker needs updates, I will look into it.

:host([dir='ltr']:not([fullscreen])[end-aligned]) [part='overlay'],
:host([dir='rtl']:not([fullscreen])[start-aligned]) [part='overlay'] {
border-radius: 4px 0 4px 4px;
}

@web-padawan web-padawan marked this pull request as draft August 20, 2024 09:48
@web-padawan web-padawan changed the title fix: allow to change overlay dir attribute while opened fix!: do not override dir attribute on the overlay to rely on DirMixin Aug 20, 2024
@web-padawan web-padawan marked this pull request as ready for review August 20, 2024 09:54
Copy link

sonarcloud bot commented Aug 20, 2024

Copy link
Contributor

@vursen vursen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM.

However, shouldn't the component propagate its dir to the overlay in general? I expected the overlay to have [dir=rtl] in this example, but it doesn't, regardless of the PR change:

<vaadin-date-picker label="Start date" dir="rtl"></vaadin-date-picker>

@web-padawan
Copy link
Member Author

However, shouldn't the component propagate its dir to the overlay in general?

Good point. We have some logic for this in vaadin-combo-box but I think it's missing from some other components.
Created #7681 so we could discuss it separately. IMO it's rather an edge case but probably it should be supported.

@web-padawan web-padawan merged commit f18cc10 into main Aug 21, 2024
9 checks passed
@web-padawan web-padawan deleted the fix/overlay-dir-attribute branch August 21, 2024 10:24
@vaadin-bot
Copy link
Collaborator

This ticket/PR has been released with Vaadin 24.5.0.beta2 and is also targeting the upcoming stable 24.5.0 version.

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

Successfully merging this pull request may close these issues.

[overlay] Overlay dir attribute not updated on re-opening after setting dir to RTL
3 participants