feat(Select): Support disabling individual items

[moathabuhamad-cengage]

Issue: #1217

What I did

• added support for disabling individual items in react-magma-dom
• added a unit test for that behavior
• added an example in the docs under api/select#disabled_items

Screenshots:

Checklist

• [x] changeset has been added
• [x] Pull request description is descriptive
• [x] I have made corresponding changes to the documentation
• [x] New and existing unit tests pass locally with my changes
• [x] I have added tests that prove my fix is effective or that my feature works

How to test

check behavior in storybooks and in docs under api/select#disabled_items

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 004917468544b1f16305a9b98c4692da6e4f7ddc

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
react-magma-dom	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions[bot]]

🚀 Deployed on https://docs-preview-1493--upbeat-sinoussi-f675aa.netlify.app

[github-actions[bot]]

🚀 Deployed on https://storybook-preview-1493--upbeat-sinoussi-f675aa.netlify.app

[github-actions[bot]]

🚀 Deployed on https://docs-preview-1493--upbeat-sinoussi-f675aa.netlify.app

[github-actions[bot]]

🚀 Deployed on https://storybook-preview-1493--upbeat-sinoussi-f675aa.netlify.app

[silvalaura]

I noticed a little bit of a strange behavior with the focus state. In the screenshot below, I was hovering over Blue, and the blue focus border kept appearing for the item below:

[github-actions[bot]]

🚀 Deployed on https://docs-preview-1493--upbeat-sinoussi-f675aa.netlify.app

[github-actions[bot]]

🚀 Deployed on https://storybook-preview-1493--upbeat-sinoussi-f675aa.netlify.app

[github-actions[bot]]

🚀 Deployed on https://docs-preview-1493--upbeat-sinoussi-f675aa.netlify.app

[github-actions[bot]]

🚀 Deployed on https://storybook-preview-1493--upbeat-sinoussi-f675aa.netlify.app

[silvalaura]

I was able to select disabled items: https://jam.dev/c/181a698f-8a4e-4604-a764-53c7a917b634

[github-actions[bot]]

🚀 Deployed on https://docs-preview-1493--upbeat-sinoussi-f675aa.netlify.app

[github-actions[bot]]

🚀 Deployed on https://storybook-preview-1493--upbeat-sinoussi-f675aa.netlify.app

[moathabuhamad-cengage]

I was able to select disabled items: https://jam.dev/c/181a698f-8a4e-4604-a764-53c7a917b634

I wasn't able to reproduce this bug but i added more checks anyway

[moathabuhamad-cengage]

A change somewhere here made us lose the focus back on the select input after isClearable X is pressed like we currently have: https://storybook-preview-dev--upbeat-sinoussi-f675aa.netlify.app/?path=/story/select--default&args=isClearable:true

this seems to be broken on dev but I included a fix in this PR

[github-actions[bot]]

🚀 Deployed on https://docs-preview-1493--upbeat-sinoussi-f675aa.netlify.app

[github-actions[bot]]

🚀 Deployed on https://storybook-preview-1493--upbeat-sinoussi-f675aa.netlify.app

[silvalaura]

A change somewhere here made us lose the focus back on the select input after isClearable X is pressed like we currently have: https://storybook-preview-dev--upbeat-sinoussi-f675aa.netlify.app/?path=/story/select--default&args=isClearable:true

this seems to be broken on dev but I included a fix in this PR

This is working as expected on dev (https://next--upbeat-sinoussi-f675aa.netlify.app/api/select/), but I see that it's now been addressed in this PR as well ✅

[silvalaura]

I was able to select disabled items: https://jam.dev/c/181a698f-8a4e-4604-a764-53c7a917b634

I wasn't able to reproduce this bug but i added more checks anyway

Steps to reproduce:

1. Navigate to https://storybook-preview-1493--upbeat-sinoussi-f675aa.netlify.app/?path=/story/select--with-disabled-items&args=isMulti:true
2. Click on select, then the down arrow key, then enter to select Red
3. Press the down arrow key again and notice the disabled item has focus. I expect disabled items to never get focus
4. Press arrow key down to select Green, then arrow key down to select Purple. Notice that when all that is left is disabled items, they can still gain focus

I think having initialHighlightedIndex is throwing things off because it's not a problem in https://storybook-preview-1493--upbeat-sinoussi-f675aa.netlify.app/?path=/story/select--multi-with-disabled-items. Although, if I change the initialHighlightedIndex1 to 1 https://storybook-preview-1493--upbeat-sinoussi-f675aa.netlify.app/?path=/story/select--multi-with-disabled-items&args=initialHighlightedIndex:1 then Blue-disabled` is the first item focused.

Something is off 🤔

[moathabuhamad-cengage]

I was able to select disabled items: https://jam.dev/c/181a698f-8a4e-4604-a764-53c7a917b634

I wasn't able to reproduce this bug but i added more checks anyway

Steps to reproduce:

1. Navigate to https://storybook-preview-1493--upbeat-sinoussi-f675aa.netlify.app/?path=/story/select--with-disabled-items&args=isMulti:true
2. Click on select, then the down arrow key, then enter to select Red
3. Press the down arrow key again and notice the disabled item has focus. I expect disabled items to never get focus
4. Press arrow key down to select Green, then arrow key down to select Purple. Notice that when all that is left is disabled items, they can still gain focus

I think having initialHighlightedIndex is throwing things off because it's not a problem in https://storybook-preview-1493--upbeat-sinoussi-f675aa.netlify.app/?path=/story/select--multi-with-disabled-items. Although, if I change the initialHighlightedIndex1 to 1 https://storybook-preview-1493--upbeat-sinoussi-f675aa.netlify.app/?path=/story/select--multi-with-disabled-items&args=initialHighlightedIndex:1 then Blue-disabled` is the first item focused.

Something is off 🤔

This was caused by mismatched indices between the filtered and unfiltered arrays, fixed by the next commit

[github-actions[bot]]

🚀 Deployed on https://docs-preview-1493--upbeat-sinoussi-f675aa.netlify.app

[github-actions[bot]]

🚀 Deployed on https://storybook-preview-1493--upbeat-sinoussi-f675aa.netlify.app

[github-actions[bot]]

🚀 Deployed on https://docs-preview-1493--upbeat-sinoussi-f675aa.netlify.app

[github-actions[bot]]

🚀 Deployed on https://storybook-preview-1493--upbeat-sinoussi-f675aa.netlify.app

[github-actions[bot]]

🚀 Deployed on https://docs-preview-1493--upbeat-sinoussi-f675aa.netlify.app

[github-actions[bot]]

🚀 Deployed on https://storybook-preview-1493--upbeat-sinoussi-f675aa.netlify.app

[silvalaura]

Issues:

1. Single select > after red is selected, if isClearable is clicked, focus goes to disabled item: https://jam.dev/c/221ef11c-aa53-4484-94ee-da3c6fd428bc
2. Not sure that initialHighlightedIndex is now working. I change it in storybook and I don't see it affecting the first item that gets focus

[github-actions[bot]]

🚀 Deployed on https://docs-preview-1493--upbeat-sinoussi-f675aa.netlify.app

[github-actions[bot]]

🚀 Deployed on https://storybook-preview-1493--upbeat-sinoussi-f675aa.netlify.app

[github-actions[bot]]

🚀 Deployed on https://docs-preview-1493--upbeat-sinoussi-f675aa.netlify.app