-
Notifications
You must be signed in to change notification settings - Fork 76
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
refactor!: enabled delegatesFocus #6056
Conversation
This reverts commit a8a10f9.
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.
Nice. Just had a question. If we call focus()
on a component with delegatesFocus enabled does it automatically focus the first element?
@@ -184,7 +185,7 @@ export class Filter | |||
async setFocus(): Promise<void> { | |||
await componentLoaded(this); | |||
|
|||
focusElement(this.textInput); | |||
this.el?.focus(); |
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.
Wouldn't this no longer focus the textInput?
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.
It does focus the Input because it's the first focusable element. I double checked to be sure, putting this in the demos for this branch correctly focuses the Input:
<calcite-filter></calcite-filter>
<script>
customElements.whenDefined("calcite-filter").then(() =>
document.querySelector("calcite-filter").setFocus());
</script>
If we call
focus()
on a component with delegatesFocus enabled does it automatically focus the first element?
It depends on whether everything is loaded. For example this works, but not without the timeout:
customElements
.whenDefined("calcite-filter")
.then(() => setTimeout(() => document.querySelector("calcite-filter").focus(), 1000));
We still need the async setFocus()
methods.
* master: (21 commits) 1.0.0-next.685 refactor(modal)!: Renamed property and updated values (#6054) 1.0.0-next.684 refactor(tab-nav, tab-title)!: remove `event.detail` payload from events (#6046) refactor(tree)!: remove `event.detail` payload from events (#6051) docs(changelog): fix breaking change indent levels (#6057) 1.0.0-next.683 refactor(pagination)!: remove `event.detail` payload from events (#6047) refactor(dropdown)!: remove `event.detail` payload from events (#6044) refactor(rating)!: remove `event.detail` payload from events (#6045) refactor(inline-editable,input,input-text,input-number)!: remove deprecated `intl*` properties (#6049) 1.0.0-next.682 refactor(scrim,rating,time-picker,input-time-picker,value-list)!: removed deprecated `intl*`properties (#6053) docs: update component READMEs (#6052) 1.0.0-next.681 refactor(chip,card,combobox,date-picker,flow,flow-item,filter, input-date-picker): remove deprecated `intl*` & accessible label properties (#6041) refactor(action,action-bar,action-group,action-pad,alert,block-section,block,button): remove deprecated `intl*` properties (#5982) 1.0.0-next.680 refactor(popover, dropdown, modal, pick-list-item, value-list-item)!: rename `disable*` properties (#6036) refactor(input-date-picker)!: Remove deprecated calciteDatePickerChange event (#6040) ...
…Esri/calcite-components into benelan/delegatesFocus-no-mock-disabled * 'benelan/delegatesFocus-no-mock-disabled' of github.com:Esri/calcite-components:
BREAKING CHANGE: Removed the
focusId
parameter fromaction-bar
andaction-pad
'ssetFocus
methodfocusId
paramtersetFocus
method, focus is delegated to the first focusable element.