fix: force focus state to dropdown.trigger as document.activeElement stays in body even with clicking #99

[sun-mota]

Related to: AlaskaAirlines/auro-formkit#129

Alaska Airlines Pull Request

Before Submitting this pull request:

• Link all tickets in this repository related to this PR in the Development section
  note: all pull requests require at least one linked ticket
• If this PR is Ready For Review, all ticket's linked under Development must have their status changed to Ready For Review as well

By submitting this Pull Request, I confirm that my contribution is made under the terms of the Apache 2.0 license and I have performed a self-review of my own update.

Summary by Sourcery

Fix focus state management in dropdown component to ensure correct element receives focus on click.

Bug Fixes:

• Fix an issue where clicking the dropdown trigger would not correctly set the focus state, resulting in the document body retaining focus instead of the trigger element.

Enhancements:

• Update dropdown component to use @floating-ui/dom for improved focus management.

[sourcery-ai]

Reviewer's Guide by Sourcery

This PR fixes a bug where the focus state was not being correctly applied to the dropdown trigger element. The fix forces focus on the trigger element when a click event occurs and the document.activeElement is the body element. This ensures that the dropdown behaves as expected, even when the focus is inadvertently lost.

Sequence diagram for dropdown click event handling with focus fix

sequenceDiagram
    participant User as User
    participant Trigger as Dropdown Trigger
    participant Document as Document
    participant AuroFloatingUI as AuroFloatingUI

    User->>Trigger: Clicks dropdown
    Trigger->>AuroFloatingUI: Triggers click event
    AuroFloatingUI->>Document: Check activeElement
    alt activeElement is body
        AuroFloatingUI->>Trigger: Force focus on trigger
    end
    AuroFloatingUI->>AuroFloatingUI: handleClick()

Loading

State diagram for dropdown focus behavior

stateDiagram-v2
    [*] --> Unfocused
    Unfocused --> FocusedOnBody: Click without proper focus
    FocusedOnBody --> FocusedOnTrigger: Force focus
    Unfocused --> FocusedOnTrigger: Direct focus
    FocusedOnTrigger --> Unfocused: Focus loss

Loading

File-Level Changes

Change	Details	Files
Force focus on dropdown trigger	Added an if statement to check if the active element is the body element. If it is, the focus is set to the current target element. This change ensures that the dropdown trigger element receives focus when clicked, even if the document's active element is the body.	scripts/runtime/floatingUI.mjs
Add floating-ui/dom dependency	Added the @floating-ui/dom package to the project dependencies. Updated the package-lock.json file to reflect the new dependency and its version.	package.json package-lock.json

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time. You can also use
  this command to specify where the summary should be inserted.

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey @sun-mota - I've reviewed your changes - here's some feedback:

Overall Comments:

• Please provide a more detailed PR description explaining the focus management issue being fixed and steps to reproduce the problem.
• The addition of @floating-ui/dom dependency needs to be explained in the PR description - is this related to the focus fix or addressing a different concern?

Here's what I looked at during the review

• 🟢 General issues: all looks good
• 🟢 Security: all looks good
• 🟢 Testing: all looks good
• 🟢 Complexity: all looks good
• 🟢 Documentation: all looks good

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[blackfalcon]

🎉 This PR is included in version 3.0.5 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀