-
Notifications
You must be signed in to change notification settings - Fork 13.5k
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(item): ensure button focus state on property change #28892
fix(item): ensure button focus state on property change #28892
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great work! I am able to verify locally that the ion-button
is able to receive focus and appropriately styling when the button
property is dynamically set.
I am going to reset core/src/components/item/test/buttons/index.html
back to origin/main
. We have existing screenshots that use the entire page template for the screenshot: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/item/test/buttons/item.e2e.ts#L13 and adding new elements will cause "visual regressions" to the existing screenshot references. Since we are not adding new E2E tests, we don't necessarily need this diff beyond local testing.
|
||
import { Item } from '../item'; | ||
|
||
it('should change focusable option after switching button option status', async () => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I will refactor this when I address the parent comment, for tests we try to nest them under a describe block for the component name.
For example:
describe('item', () => {
/* existing test */
});
It helps when reviewing the logs locally or in CI to know exactly which component the spec test is responsible for.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ah, got it! 👍
Issue number: resolves #28525
What is the current behavior?
When navigated via tab-key, the ion-item is not highlighted correctly after switching from button=false to button=true.
What is the new behavior?
Now, when dynamically changing the the
button
option toTrue
, there's a@watch
callback that will make sure the internalisFocusable
@state
will be updated.ion-item
, a new files was created -item.spec.tsx
Does this introduce a breaking change?
Other information
New behavior in runtime: