fix: [M3-10264] - Disabled Autocomplete Options

[bnussman-akamai]

Description 📝

This PR makes some fixes related to disabled options in Autocompletes:

• Fixes issue where disabled Autocomplete options do not look like they are disabled
  • In this PR, disabled options now look disabled
• Fixes issue where disabled Autocomplete option tooltips do not open when you focus the option with the keyboard
  • In this PR, you will now see the tooltip when you focus the disabled option with your keyboard
• Fixes issue where aria-disabled is set to false on disabled Autocomplete options
  • In this PR, aria-disabled should now be set to true for disabled options

Preview 📷

Region Select

Before	After

Placement Group Select

Before	After

How to test 🧪

• Test the Region Select component on the Linode Create flow and in other places
  • Verify disabled regions show a tooltip explaining why
    • Verify you can trigger the tooltip using your keyboard
  • Verify disabled options appear visibly disabled
• Test the Placement Group Affinity Type Select in the Placement Group Create drawer
  • Verify disabled options show a tooltip explaining why
    • Verify you can trigger the tooltip using your keyboard
  • Verify disabled options appear visibly disabled
• Test other autocompletes that feature disabled options

Author Checklists

As an Author, to speed up the review process, I considered 🤔

👀 Doing a self review
❔ Our contribution guidelines
🤏 Splitting feature into small PRs
➕ Adding a changeset
🧪 Providing/improving test coverage
🔐 Removing all sensitive information from the code and PR description
🚩 Using a feature flag to protect the release
👣 Providing comprehensive reproduction steps
📑 Providing or updating our documentation
🕛 Scheduling a pair reviewing session
📱 Providing mobile support
♿ Providing accessibility support

• I have read and considered all applicable items listed above.

As an Author, before moving this PR from Draft to Open, I confirmed ✅

• All tests and CI checks are passing
• TypeScript compilation succeeded without errors
• Code passes all linting rules

[mjac0bs]

Thanks for fixing this. Great find on the keyboard accessibility.

Saw this unit test failure locally, as well, and looks like a new issue, though I'm not exactly sure what in this PR caused it:

[linode-gh-bot]

Cloud Manager UI test results

🎉 690 passing tests on test run #5 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
0 Failing	690 Passing	4 Skipped	113m 47s

[bnussman-akamai]

@mjac0bs I think I got the scroll / tooltip overflow behavior somewhat better. It should now be similar to how production works. Not perfect, but as good as I can get it...

[bnussman-akamai]

@mjac0bs Nevermind, that broke tooltip interactivity.

I don't really have a sound solution for preventing tooltip overflow...

I think I'll need some help here, or we can merge this because I think this PR makes a net improvement, and we can look to iterate on the tooltip's behavior

[mjac0bs]

Sorry that tooltip's been a handful! I'll take a look again with the latest, but given that it's somewhat of an existing issue made slightly more prevalent, I'm okay with the changes you made and doing further follow up on tooltip behavior too.

[mjac0bs]

I got deep in the weeds of the Popover's modifier prop before creating a ticket M3-10400.

Popper.js is based on a "plugin-like" architecture, most of its features are fully encapsulated "modifiers". A modifier is a function that is called each time Popper.js needs to compute the position of the popper. For this reason, modifiers should be very performant to avoid bottlenecks. To learn how to create a modifier, read the modifiers documentation.

[pmakode-akamai]

ux question (non-blocking): Not sure if this is a UX issue or something for a follow-up ticket, but I noticed that when the cursor is already over the dropdown and you start using the keyboard, the focus/highlight jumps around based on the cursor position, which feels a bit confusing. It works fine when the cursor is outside the list

Screen.Recording.2025-07-31.at.6.47.47.PM.mov

[jaalah-akamai]

ux question (non-blocking): Not sure if this is a UX issue or something for a follow-up ticket, but I noticed that when the cursor is already over the dropdown and you start using the keyboard, the focus/highlight jumps around based on the cursor position, which feels a bit confusing. It works fine when the cursor is outside the list

That may be something we're doing with CSS, the MUI Autocomplete does not do this. I'll create a ticket - thanks @pmakode-akamai

[bnussman-akamai]

Going to merge so that disabled states work again. Hopefully we can dial in focus and tooltip behavior in the future. (M3-10400)