fix(ripple-effect): ripple displays on click or touch #25102
Conversation
| } | ||
|
|
||
| // Waits for the ripple effect to be added | ||
| await page.waitForSelector(`${selector}.ion-activated`); |
There was a problem hiding this comment.
If I check the button demo on https://ionicframework.com/docs, the button receives ion-activated for a brief moment on click, even with the busted ripple effect. Does the test fail with the broken state? 🤔
There was a problem hiding this comment.
Are you possibly being served from a cache? I don't see the class added to the button element when clicking and holding on the button in the docs examples. Chrome also doesn't indicate that the class attribute was modified during mouse down.
There was a problem hiding this comment.
Happens in incognito, screencast: https://user-images.githubusercontent.com/90629384/163048183-3adafc01-3551-43a5-b6e9-962630f7df91.mp4 The class is on there as long as I have the mouse button held down.
There was a problem hiding this comment.
Strange that doesn't happen on Mac 🤔 https://user-images.githubusercontent.com/13732623/163049314-6e795818-897e-464b-ba0c-ba589f0bd4fe.mp4
Anyways, I confirmed that with the changes on main, the test suite fails. With the changes in this branch, the test suite passes.
There was a problem hiding this comment.
Cool, that's what's important 👍
Pull request checklist
Please check if your PR fulfills the following requirements:
npm run build) was run locally and any changes were pushednpm run lint) has passed locally and any fixes were made for failuresPull request type
Please check the type of change your PR introduces:
What is the current behavior?
The ripple effect is broken and does not display when clicking or tapping a button.
Issue URL: #25094
What is the new behavior?
Reverts the optional chaining fixes for eslint and restores the original behavior for ripple effect.
Does this introduce a breaking change?
Other information
Dev build:
6.0.17-dev.11649730310.17726968