Issue when using Focus Trap on Listboxes

[MeroVinggen]

Describe the feature in detail (code, mocks, or screenshots encouraged)

It would be just great to have possibility to use focusTrap for Listboxes

What type of pull request would this be?

None

Provide relevant links or additional information.

No response

[endigo9740]

@Mero-Plaform can you explain what's not working? Typically you can't put actions directly on components. However, you can always implement a wrapping element, like a div, which allows for this.

[MeroVinggen]

@endigo9740 Yes, it's impossible to set use directive to the component, but it doesn't work with plain div wrap.

Or I'm just missing something:

<script lang="ts">
  import { focusTrap, ListBox, ListBoxItem } from "@skeletonlabs/skeleton";

  let valueSingle: string = "books";
</script>

<div use:focusTrap={true}>
  <ListBox>
    <ListBoxItem bind:group={valueSingle} name="medium" value="books"
      >Books</ListBoxItem
    >
    <ListBoxItem bind:group={valueSingle} name="medium" value="movies"
      >Movies</ListBoxItem
    >
    <ListBoxItem bind:group={valueSingle} name="medium" value="tv"
      >TV</ListBoxItem
    >
  </ListBox>
</div>

[endigo9740]

That looks like the correct implementation per the documentation:
https://www.skeleton.dev/actions/focus-trap

When you put tab focus within that region of the page, what is not working? I'd expect tab focus to remain within the listbox items. If it's not, that sounds more like a bug. Essentially what where you expecting versus what is actually happening?

EDIT

I've tested this and confirmed this is not behaving as expected. This may be related to this issue. I'm going to switch this to a bug ticket and we'll look to fix when we can.

[Mahmoud-zino]

@endigo9740
this is not related to the other issue. the error is in our query:

skeleton/packages/skeleton/src/lib/actions/FocusTrap/focusTrap.ts

Line 3 in 5bcf1da

const elemWhitelist = 'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])';

I tested the same query with :not([tabindex="-1"]) after each selector and it is working as expected.
we can either modify the query to include :not after each selector or append it to the query using js.
let me know which way you prefer and I will create the PR 👍

[endigo9740]

Awesome, go for it @Mahmoud-zino