[PAI-785] fix: custom select auto close on select

[gakshita]

Description

Custom select will now auto close on select

Summary by CodeRabbit

• Bug Fixes
  • The custom select now closes automatically after an option is selected by default, preventing it from remaining open and reducing unintended extra clicks. It can also be configured to remain open when desired.
• Style
  • The custom select trigger button now has rounded corners for a cleaner, more modern appearance.

[Copilot]

Pull Request Overview

This PR fixes a UX issue where the custom select dropdown component remained open after a user made a selection, implementing auto-close functionality on item selection.

Key Changes

• Modified the onChange handler to automatically close the dropdown after selection
• Added a "rounded" CSS class to improve the visual styling of the select button

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[makeplane]

Linked to Plane Work Item(s)

• [PAI-785] Dropdowns not closing in Pi

This comment was auto-generated by Plane

[coderabbitai]

Walkthrough

Added an optional closeOnSelect prop to ICustomSelectProps and used it in CustomSelect to conditionally call closeDropdown() after invoking onChange. Also added a rounded class to the custom trigger button’s className. No other API changes.

Changes

Cohort / File(s)	Summary of Changes
CustomSelect behavior & styling packages/ui/src/dropdowns/custom-select.tsx	Added closeOnSelect usage: wrapped existing onChange to invoke consumer onChange(val) and, if closeOnSelect is true, call closeDropdown(). Added rounded to custom button className.
Interface declaration packages/ui/src/dropdowns/helper.tsx	Added optional property closeOnSelect?: boolean to ICustomSelectProps (extends IDropdownProps).

Sequence Diagram(s)

sequenceDiagram
  autonumber
  participant U as User
  participant CS as CustomSelect
  participant H as Consumer onChange

  U->>CS: select option(value)
  CS->>H: onChange(value)
  Note right of H: Consumer handles value
  H-->>CS: return
  alt closeOnSelect === true
    CS->>CS: closeDropdown()
    Note over CS: Dropdown closes
  else closeOnSelect === false
    Note over CS: Dropdown remains open
  end

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

I nibble keys and chew on bits,
A click, a change, the dropdown flits.
If closy mood is set just right,
It folds away from view and sight.
Rounded button hop—nap time, delight.

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description Check	⚠️ Warning	The description only contains a brief statement under the Description heading and omits several sections required by the repository template, including Type of Change, Test Scenarios, Screenshots and Media, and References.	Please update the description to include the Type of Change checkbox sections, detailed test scenarios, any relevant screenshots or media, and references to related issues or tickets as outlined in the template.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title clearly summarizes the main change by indicating that the custom select component will now automatically close upon selection and includes the relevant issue identifier, making it both concise and informative.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix-custom-select-auto-close

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 61ee99c and a405c14.

📒 Files selected for processing (2)

• packages/ui/src/dropdowns/custom-select.tsx (3 hunks)
• packages/ui/src/dropdowns/helper.tsx (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• packages/ui/src/dropdowns/custom-select.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: Build and lint web apps
• GitHub Check: Analyze (javascript)

🔇 Additional comments (1)

packages/ui/src/dropdowns/helper.tsx (1)

62-62: LGTM! Clean interface extension.

The addition of the optional closeOnSelect property is well-implemented and consistent with the same property in ICustomMenuDropdownProps (Line 52). The optional nature ensures backward compatibility.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

packages/ui/src/dropdowns/custom-select.tsx (1)

77-79: Prefer cn() utility for consistency.

The addition of the "rounded" class improves visual consistency with the non-custom button. However, consider using the cn() utility (as used in line 90 for the non-custom button) instead of template literal concatenation for better consistency across the codebase.

Apply this diff to use the cn() utility:

         <Combobox.Button as={React.Fragment}>
           <button
             ref={setReferenceElement}
             type="button"
-            className={`flex items-center justify-between gap-1 text-xs rounded ${
-              disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
-            } ${customButtonClassName}`}
+            className={cn(
+              "flex items-center justify-between gap-1 text-xs rounded",
+              {
+                "cursor-not-allowed text-custom-text-200": disabled,
+                "cursor-pointer hover:bg-custom-background-80": !disabled,
+              },
+              customButtonClassName
+            )}
             onClick={toggleDropdown}
           >

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3cbb604 and 61ee99c.

📒 Files selected for processing (1)

• packages/ui/src/dropdowns/custom-select.tsx (2 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: Build and lint web apps
• GitHub Check: Analyze (javascript)

🔇 Additional comments (1)

packages/ui/src/dropdowns/custom-select.tsx (1)

63-66: Approve: explicit closeDropdown() correctly restores auto-close
Given the use of static and data-prevent-outside-click on Combobox.Options, Headless UI’s default close-on-select is intentionally disabled, so calling closeDropdown() in the onChange handler is required. Optionally, wrap the provided onChange in a try/catch to avoid closing on error.