Skip to content

refactor: polish OlPopover and OlSelectPopover behavior#12680

Merged
lokesh merged 1 commit into
internetarchive:masterfrom
lokesh:may-8
May 19, 2026
Merged

refactor: polish OlPopover and OlSelectPopover behavior#12680
lokesh merged 1 commit into
internetarchive:masterfrom
lokesh:may-8

Conversation

@lokesh
Copy link
Copy Markdown
Collaborator

@lokesh lokesh commented May 8, 2026

Two small refinements to the Lit popover components introduced in #12635 following a meeting w/ @cdrini @mekarpeles @RayBB @Armansiddiqui9

Technical

  • OlPopover — fixes the OlSelectPopover trigger chevron not reverting to its default (down) state when the popover was closed by clicking the trigger. The chevron rotation is driven by a data-open attribute that OlSelectPopover toggles in response to ol-popover-close. The trigger-click path was setting open = false directly and skipping that event, so the attribute (and the chevron) got stuck in the open state. Trigger close now goes through the same _requestClose path as escape/outside-click so the event fires.
  • OlSelectPopover
    • Moves the chevron icon after the label in the default trigger so the visual order is label → indicator.
    • Skips auto-focusing the filter input when opening on mobile (≤767px, matching ol-popover's tray breakpoint). Previously, opening the popover on a touch device would pop up the soft keyboard and shrink the visible list area. Desktop behavior is unchanged: the filter still gets focus so the user can type immediately.

Testing

  • Click the trigger to open, click again to close → chevron rotates back to the down state on close (regression fix).
  • Desktop: opening focuses the filter input so the user can type immediately.
  • Mobile (or DevTools device emulation ≤767px wide): tap the trigger → popover/tray opens but the soft keyboard does not pop up. Tapping the filter still focuses it.
  • Verify the chevron renders to the right of the label in the default trigger.

Screenshot

image

Stakeholders

@cdrini

- OlPopover: route trigger-click close through _requestClose so it
  emits a cancelable ol-popover-close event (reason: 'trigger'),
  matching escape/outside-click paths.
- OlSelectPopover: move chevron after the label in the default
  trigger; skip filter auto-focus on mobile (≤767px) so opening the
  popover doesn't pop the soft keyboard and shrink the list area.
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

Refines the behavior of the Lit-based popover components (ol-popover and ol-select-popover) to improve event consistency and mobile UX.

Changes:

  • OlPopover: trigger-click close now routes through _requestClose('trigger'), making it emit a cancelable ol-popover-close event (consistent with escape/outside-click).
  • OlSelectPopover: adjusts the default trigger layout to render chevron after the label, and skips auto-focusing the filter input on mobile-sized viewports to avoid popping up the soft keyboard.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File Description
openlibrary/components/lit/OlPopover.js Makes trigger-close emit the same cancelable close event path as other dismissal reasons; updates event reason docs.
openlibrary/components/lit/OlSelectPopover.js Tweaks default trigger visual order and avoids mobile auto-focus of the filter input.

Comment thread openlibrary/components/lit/OlSelectPopover.js
@Armansiddiqui9
Copy link
Copy Markdown
Contributor

Armansiddiqui9 commented May 19, 2026

Screen.Recording.2026-05-20.023513.mp4

Update: I retested. after refetching the latest changes and building again locally.
This issue is resolved as shown above in the screen recording. Sorry for the confusion.

@lokesh lokesh merged commit d014e58 into internetarchive:master May 19, 2026
8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants