fix(datetime): allow disabling datetime with prefer-wheel #28511
Conversation
mapsandapps
requested review from
liamdebeasi,
averyjohnston and
sean-perkins
as code owners
core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e.ts
Show resolved
Hide resolved
| }); | ||
| await page.waitForChanges(); | ||
|
|
||
| await expect(disabledColumn).toHaveScreenshot(screenshot('picker-internal-disabled-column')); |
There was a problem hiding this comment.
We should dig into this test more. Playwright is already reporting it as flaky.
There was a problem hiding this comment.
It's still flaking. I can't reproduce locally 😕
There was a problem hiding this comment.
Can we try loading the test with the value already set? The problem might be that Playwright isn't waiting for the scroll to finish before taking a screenshot.
There was a problem hiding this comment.
I meant that we should try loading the picker with value="11" already set. So you should be able to do value="11" here:
For 7a3771a this causes a regression where the selected item is no longer highlighted when the picker column is disabled. You can see this at src/components/picker-column-internal/test/disabled on MD mode. The "11" option in "Column disabled" is no longer highlighted in blue.
According to your comment in https://github.com/ionic-team/ionic-framework/pull/28511/files#diff-5e7b473017ccb3a8be0fa9c7c9d8e1fc393b64ddfe719d5f3274e212ba09b3fdR416 this item should be highlighted blue.
There was a problem hiding this comment.
I don't understand how setting the value directly changes anything for the scrolling if the items don't get set until the script? It can't scroll until the items are there any more than it can scroll if the value isn't there, right? 🤔
My comment about the active item was referring to the fact that the item should be scrolled to. But from looking at our other disabled md components, it does look like it should be blue as well. I'll revert that change, but I don't know what's causing it to be blue sometimes and gray others in md mode on Safari.
There was a problem hiding this comment.
Updated. Also, I added a screenshot for the disabled calendar wheel to capture that intended behavior.
There was a problem hiding this comment.
I don't understand how setting the value directly changes anything for the scrolling if the items don't get set until the script? It can't scroll until the items are there any more than it can scroll if the value isn't there, right?
The issue that I raised was the value was being set after the component loaded: https://github.com/ionic-team/ionic-framework/pull/28511/files/b7e42befeabbbb96044bbaa0aeb6ba6668baa547#diff-875e8dba2863da31c37c64b445f9c01418f2ee542625acf814f7a8cab7464b19R174
Your old test loaded the picker with value="12". The picker spends time scrolling to value 12. The test then set the value to 11, so the picker then needed to spend additional time scrolling to value 11. This additional value update can take a few hundred ms especially on CI.
By setting up the test with the correct configuration on load we a) reduce the run time of the test and b) reduce the likelihood of flaky tests.
core/src/components/picker-column-internal/picker-column-internal.scss
Outdated
Show resolved
Hide resolved
core/src/components/picker-column-internal/picker-column-internal.scss
Outdated
Show resolved
Hide resolved
core/src/components/picker-column-internal/picker-column-internal.tsx
Outdated
Show resolved
Hide resolved
| class={createColorClasses(color, { | ||
| [mode]: true, | ||
| ['picker-column-active']: isActive, | ||
| ['picker-column-disabled']: pickerDisabled, |
There was a problem hiding this comment.
This class doesn't seem needed anymore. The only place it's used is in the CSS, and that could be swapped out for the [disabled] attribute.
There was a problem hiding this comment.
Sure. I went ahead and removed the .picker-item-disabled class while I was in there, by the same reasoning, even though it predates this PR.
There was a problem hiding this comment.
I was referring to picker-column-disabled not picker-item-disabled. The picker-column-disabled class was added in this PR.
edit: see below
There was a problem hiding this comment.
Re-read this and looks like I misunderstood your original comment. All of that sounds good!
There was a problem hiding this comment.
I made one change in fab89a7
This test is not needed because we already have the following tests:
- A test to verify that datetime sets the
disabledprop on columns correctly: https://github.com/ionic-team/ionic-framework/pull/28511/files#diff-68455eb0492521a5359f114d63eedc2c4d3731e47f7fa6f349ba54456bcc18a2 - A test to verify that a column renders correctly when
disabledis set: https://github.com/ionic-team/ionic-framework/pull/28511/files#diff-875e8dba2863da31c37c64b445f9c01418f2ee542625acf814f7a8cab7464b19
Datetime does not apply any disabled-specific visual styles for the wheel picker. It does apply pointer-events: none, but the test I removed was not checking that.
The rest of this is good to go. Great work!
Issue number: Internal
What is the current behavior?
It is possible to navigate the columns of a disabled Datetime with
prefer-wheelvia the keyboard.disabled-bug.mov
What is the new behavior?
prefer-wheel, the columns in the Datetime will be disabledComparison of native & Ionic components:
Does this introduce a breaking change?