[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.

[makeplane[bot]]

Linked to Plane Work Item(s)

• [PAI-785] Dropdowns not closing in Pi

This comment was auto-generated by Plane

[coderabbitai[bot]]

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

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 61ee99cf5fd13ede99ee720bd13503f2baa9aeef and a405c149397c90e97de717785135c873c12ee344.

📒 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.}