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

refactor!: enabled delegatesFocus #6056

Merged
merged 15 commits into from
Dec 15, 2022

Conversation

benelan
Copy link
Member

@benelan benelan commented Dec 15, 2022

BREAKING CHANGE: Removed the focusId parameter from action-bar and action-pad's setFocus method

  • action-bar, action-pad: Removed focusId paramter setFocus method, focus is delegated to the first focusable element.

@benelan benelan requested a review from a team as a code owner December 15, 2022 09:02
@github-actions github-actions bot added the refactor Issues tied to code that needs to be significantly reworked. label Dec 15, 2022
Copy link
Member

@driskull driskull left a 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();
Copy link
Member

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?

Copy link
Member Author

@benelan benelan Dec 15, 2022

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:
@benelan benelan added breaking change Issues and pull requests with code changes that are not backwards compatible. pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Dec 15, 2022
@benelan benelan merged commit b7d8743 into master Dec 15, 2022
@benelan benelan deleted the benelan/delegatesFocus-no-mock-disabled branch December 15, 2022 22:43
@github-actions github-actions bot added this to the 2023 January Priorities milestone Dec 15, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
breaking change Issues and pull requests with code changes that are not backwards compatible. pr ready for visual snapshots Adding this label will run visual snapshot testing. refactor Issues tied to code that needs to be significantly reworked.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants