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

fix(modal): prevent error when calling setFocus on a recently rendered and opened modal (dist-custom-elements) #6666

Conversation

jcfranco
Copy link
Member

@jcfranco jcfranco commented Mar 27, 2023

Related Issue: #6188

Summary

This is a workaround for modal throwing an error in the dist-custom-elements build when setting focus on the first focusable item after the component initially renders. Fortunately for modal, focus is set properly after the open animation.

The problem seems to be the focus-trap's element ref not being called on componentDidLoad, not even after using requestAnimationFrame as used in this Ionic util, nor setTimeout as suggested here. We'll investigate and open an issue if this is indeed a lifecycle bug.

@github-actions github-actions bot added the bug Bug reports for broken functionality. Issues should include a reproduction of the bug. label Mar 27, 2023
@jcfranco jcfranco marked this pull request as ready for review March 27, 2023 17:44
@jcfranco jcfranco requested a review from a team as a code owner March 27, 2023 17:44
@jcfranco jcfranco changed the title fix(modal): prevent error when calling setFocus on a recently rendered and opened modal (dist-custom-elements) fix(modal): prevent error when calling setFocus on a recently rendered and opened modal (dist-custom-elements) Mar 27, 2023
@jcfranco jcfranco requested a review from benelan March 27, 2023 17:44
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.

👍

@jcfranco jcfranco merged commit aa1f3d1 into master Mar 27, 2023
@jcfranco jcfranco deleted the jcfranco/6188-fix-modal-setFocus-error-in-custom-elements-build branch March 27, 2023 17:52
benelan added a commit that referenced this pull request Mar 27, 2023
…ocus-revert

* origin/master: (30 commits)
  fix(modal): prevent error when calling setFocus on a recently rendered and opened modal (`dist-custom-elements`) (#6666)
  fix(tile-select): fix click not firing in custom-elements build (#6665)
  fix(card): provide more meaningful screen reader label for selectable cards (deprecates `deselect` message override) (#6657)
  fix(pagination): add current page information for screen readers (#6637)
  chore: update jsbin sample to CC 1.0 breaking changes and latest jsapi version (#6651)
  feat(text-area): add calcite-text-area component (#5644)
  chore(release): 1.1.1-next.2
  fix(tile): adds styling to `tile` where `link` is present for additional distinction (#6628)
  docs(input, input-number, input-text): api consistency across components (#6634)
  docs(accordion-item): add actions-start and actions-end slots (#6631)
  docs(modal): kebab-case slot names and sticky context (#6625)
  chore(release): 1.1.1-next.1
  fix: restore form control validation in Safari (#6623)
  chore(linting): fix linting errors (#6613)
  build(deps): Bump eslint-plugin-react from 7.31.11 to 7.32.2 (#6619)
  build(deps): Bump eslint from 8.35.0 to 8.36.0 (#6620)
  build(deps): Bump @types/lodash-es from 4.17.6 to 4.17.7 (#6621)
  build: fix peer dependency resolution error (#6611)
  ci: update user-defined priority (#6609)
  build: update browserslist db (#6527)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Bug reports for broken functionality. Issues should include a reproduction of the bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants