Skip to content

Conversation

@ShGKme
Copy link
Contributor

@ShGKme ShGKme commented Feb 28, 2025

☑️ Resolves

  • Regression from: fix(NcEmojiPicker): arrow navigation #6466
  • NcEmojiPicker now has it's own focus trap implementation => global one must be paused (like in NcActions)
  • Added an util and a composable to reuse it
  • NcModal has similar thing but not the same thing. Not touching now

How to test:

  1. Open NcModal example in vue-styleguidist
  2. In the last example remove container=".emoji-modal"
  3. Use keyboard

🖼️ Screenshots

🏚️ Before 🏡 After
before after

🏁 Checklist

  • ⛑️ Tests are included or are not applicable
  • 📘 Component documentation has been extended, updated or is not applicable
  • 3️⃣ Backport to next requested with a Vue 3 upgrade

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
@ShGKme ShGKme added bug Something isn't working 3. to review Waiting for reviews feature: emoji picker Related to the emoji picker component labels Feb 28, 2025
@ShGKme ShGKme added this to the 8.23.2 milestone Feb 28, 2025
@ShGKme ShGKme self-assigned this Feb 28, 2025
Comment on lines +358 to +362
created() {
// Component has its own custom focus management
// The global focus trap stack should be paused
useTrapStackControl(() => this.open)
},
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this work? As it probably needs to be registered in the setup method.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes (see screenshots).

It works because lifecycle hooks have the setup context. And a getter is a valid way to provide reactive value.

created works same as setup, but with access to this.

To move it to setup we'd need to move all the reactive variables to setup. I didn't want to change components too much just to use the composable.

@ShGKme ShGKme force-pushed the fix/NcEmojiPicker--focus-trap-stack branch from cf1b158 to 6476ad7 Compare February 28, 2025 12:58
Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
@ShGKme ShGKme force-pushed the fix/NcEmojiPicker--focus-trap-stack branch from 6476ad7 to d607354 Compare February 28, 2025 12:58
@ShGKme
Copy link
Contributor Author

ShGKme commented Feb 28, 2025

Force-pushed SPDX header, no other changes.

Copy link
Contributor

@susnux susnux left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fine then

@ShGKme
Copy link
Contributor Author

ShGKme commented Feb 28, 2025

/backport to next

@susnux susnux modified the milestones: 8.23.2, 8.24.0 Feb 28, 2025
Copy link
Contributor

@Antreesy Antreesy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested

@ShGKme ShGKme merged commit 8b3863b into master Feb 28, 2025
23 checks passed
@ShGKme ShGKme deleted the fix/NcEmojiPicker--focus-trap-stack branch February 28, 2025 14:45
@ShGKme ShGKme mentioned this pull request Mar 28, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

3. to review Waiting for reviews bug Something isn't working feature: emoji picker Related to the emoji picker component

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants