Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughThis PR migrates the Select component from Radix UI and Ariakit primitives to Base UI, restructuring internal component logic and public interfaces to support both autocomplete and standard select modes. The Calendar component's dropdown rendering is simplified, and test patterns across multiple test files are updated to use more specific DOM selectors. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
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. Comment |
This reverts commit 30ea160.
|
@rohanchkrabrty What is blocking this? |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Nitpick comments (1)
packages/raystack/components/select/select.module.css (1)
256-259: Consider scoping the generic[data-disabled]selector.The unscoped
[data-disabled]selector could inadvertently affect any element within this module that has this attribute. If this is intentional for consistency, it's fine. Otherwise, consider scoping it to specific components like.trigger[data-disabled],.menuitem[data-disabled].🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/raystack/components/select/select.module.css` around lines 256 - 259, The generic [data-disabled] selector is too broad and may style unrelated elements; restrict it to the select component's specific elements by replacing it with scoped selectors such as .trigger[data-disabled], .menuitem[data-disabled] (and any other component-specific classes like .option[data-disabled] if present) so only those elements get cursor: not-allowed and pointer-events: none; update the rule in select.module.css accordingly.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/raystack/components/select/select-root.tsx`:
- Around line 204-224: The autocomplete branch is not forwarding the public
BaseSelectProps form props so name and required are missing; update the
ComboboxPrimitive.Root invocation to receive the same form props as the
non-autocomplete path by adding name and required (or include them in
commonProps) so ComboboxPrimitive.Root gets name and required like
SelectPrimitive.Root does; locate the autocomplete conditional using
autocomplete, commonProps, ComboboxPrimitive.Root and ensure name and required
from the component props (or from commonProps) are passed through.
- Around line 204-217: The autocomplete branch leaves the Combobox uncontrolled:
when using ComboboxPrimitive.Root you must pass both the current value and
change handler; update the ComboboxPrimitive.Root invocation in select-root.tsx
(the block using autocomplete) to include the inputValue prop bound to the
tracked state (inputValue={searchValue}) alongside the existing
onInputValueChange={handleSearchValueChange} so the combobox input stays
synchronized with the component's searchValue/defaultSearchValue state.
In `@packages/raystack/components/select/select-trigger.tsx`:
- Around line 49-50: The component currently spreads iconProps after setting
className={styles.triggerIcon}, which allows consumer iconProps.className to
overwrite the base styling; update both occurrences (the iconProps spread at the
first occurrence and the second occurrence around lines 72-76) to merge class
names instead of overwriting — e.g., compute className={clsx(styles.triggerIcon,
iconProps.className)} (or use the project's existing cx/clsx helper) and spread
the rest of iconProps without its className, keeping symbols iconProps and
styles.triggerIcon and the SelectTrigger/trigger rendering logic intact.
In `@packages/raystack/components/select/select-value.tsx`:
- Around line 26-34: The current useMemo in select-value.tsx can include
undefined entries because items[v] may not be populated yet; update the logic in
the useMemo that computes item (and the analogous logic around lines 65-66) to
filter out falsy/undefined results from itemValues (e.g., const itemValues =
value.map(v => items[v]).filter(Boolean)) before returning, and ensure you still
return undefined when the filtered array is empty, return the single item when
length === 1, or return the filtered array for multiple values so
SelectMultipleValue never receives undefined entries.
- Around line 18-20: SelectValue returns block-level divs inside a span
(forwardRef<HTMLSpanElement, SelectValueProps> component) which breaks HTML
semantics and SSR hydration; update the component to use a consistent block
wrapper (e.g., change the outer element from span to div and adjust the
forwarded ref type accordingly) or ensure inner elements are inline (replace
inner divs with spans) so no div is nested inside a span; locate the SelectValue
function that destructures ({ children, placeholder, className, ...props }) and
the useSelectContext() usage and make the wrapper change there and update any
ref typing and className/props passthrough to match the new element.
In `@packages/raystack/components/select/select.module.css`:
- Around line 40-42: The dropdown lacks a visual cue for selected items in
single-select mode because the CSS rule in select.module.css is commented out
and Item rendering in select-item.tsx never sets the data-selected attribute;
fix by uncommenting or restoring the CSS rule that targets
.menuitem[data-selected] and update the ItemPrimitive render in select-item.tsx
to set data-selected={state.selected || undefined} (or implement an alternate
visual indicator) so selected items show the intended background; ensure this
change only applies when data-multiselectable != "true" to preserve the existing
multi-select Checkbox behavior.
---
Nitpick comments:
In `@packages/raystack/components/select/select.module.css`:
- Around line 256-259: The generic [data-disabled] selector is too broad and may
style unrelated elements; restrict it to the select component's specific
elements by replacing it with scoped selectors such as .trigger[data-disabled],
.menuitem[data-disabled] (and any other component-specific classes like
.option[data-disabled] if present) so only those elements get cursor:
not-allowed and pointer-events: none; update the rule in select.module.css
accordingly.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 35fe040c-9236-4051-b414-3d9b18adaeaf
📒 Files selected for processing (13)
packages/raystack/components/calendar/calendar.tsxpackages/raystack/components/code-block/__tests__/code-block.test.tsxpackages/raystack/components/filter-chip/__tests__/filter-chip.test.tsxpackages/raystack/components/select/__tests__/select.test.tsxpackages/raystack/components/select/select-content.tsxpackages/raystack/components/select/select-item.tsxpackages/raystack/components/select/select-misc.tsxpackages/raystack/components/select/select-multiple-value.tsxpackages/raystack/components/select/select-root.tsxpackages/raystack/components/select/select-trigger.tsxpackages/raystack/components/select/select-value.tsxpackages/raystack/components/select/select.module.csspackages/raystack/components/select/select.tsx
| if (autocomplete) { | ||
| return ( | ||
| <SelectContext.Provider value={contextValue}> | ||
| <ComboboxPrimitive.Root | ||
| {...commonProps} | ||
| onInputValueChange={handleSearchValueChange} | ||
| filter={itemsProp ? undefined : null} | ||
| items={itemsProp} | ||
| loopFocus={false} | ||
| // @ts-ignore BaseUI types are not up to date | ||
| autoHighlight='always' | ||
| > | ||
| {children} | ||
| </ComboboxPrimitive.Root> | ||
| </SelectContext.Provider> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <SelectContext.Provider | ||
| value={{ | ||
| value: computedValue, | ||
| registerItem, | ||
| unregisterItem, | ||
| autocomplete, | ||
| autocompleteMode, | ||
| searchValue, | ||
| multiple, | ||
| items, | ||
| updateSelectionInProgress, | ||
| setValue | ||
| }} | ||
| > | ||
| <SelectPrimitive.Root | ||
| autoComplete={htmlAutoComplete} | ||
| value={radixValue} | ||
| onValueChange={setValue} | ||
| open={open} | ||
| onOpenChange={handleOpenChange} | ||
| {...rest} | ||
| > | ||
| {autocomplete ? element : children} | ||
| <SelectContext.Provider value={contextValue}> | ||
| <SelectPrimitive.Root {...commonProps} required={required} name={name}> |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
In @base-ui/react, does Combobox.Rootsupport form participation vianameandrequired? If not, what is the recommended pattern to submit and validate combobox values in forms?
💡 Result:
Yes. Combobox.Root supports native form participation via both:
name: “Identifies the field when a form is submitted.” [1]required: “Whether the user must choose a value before submitting a form.” [1]
It participates using a hidden input (you can access it with inputRef). [1]
Recommended pattern for submitting + validating in forms
Use Base UI’s Form + Field.Root to define the field name and show validation UI, and put the combobox inside it:
- Put the field
nameon<Field.Root name="…">so the wrapped control is included on submit. [2] - Put
requiredon the combobox (or other constraint props where supported), and render<Field.Error />for messages. [1][2] - If your combobox values are objects, provide
itemToStringValueso the hidden input can submit a string value. [1] - For correct native validation bubble positioning, ensure the field has a
nameand (optionally) wrap the control area in a relatively positioned container (Base UI notes this for hidden-input-based controls). [2]
Minimal sketch:
<Form>
<Field.Root name="country">
<Field.Label>Country</Field.Label>
<div className="relative">
<Combobox.Root required /* items=... */ />
</div>
<Field.Error />
</Field.Root>
</Form>If you’re using a form library (e.g. React Hook Form): keep the combobox controlled (value / onValueChange) and drive Field.Root’s error/invalid state from the library; Base UI’s forms guide shows this “Controller + Field.Root + Combobox” pattern. [2]
Sources: Combobox API reference [1], Base UI Forms handbook [2].
🏁 Script executed:
# Check the full select-root.tsx file to understand the context
wc -l packages/raystack/components/select/select-root.tsxRepository: raystack/apsara
Length of output: 114
🏁 Script executed:
# Read the complete file to understand the structure and form handling pattern
cat -n packages/raystack/components/select/select-root.tsxRepository: raystack/apsara
Length of output: 7125
🏁 Script executed:
# Search for SelectRoot usage to understand if Form/Field.Root wrapping is expected at call site
rg "SelectRoot|<Select\.Root" --type tsx --type ts -B 2 -A 2 | head -100Repository: raystack/apsara
Length of output: 86
🏁 Script executed:
# Search for SelectRoot usage without type flag
rg "SelectRoot|<Select\.Root" -B 2 -A 2 | head -100Repository: raystack/apsara
Length of output: 3167
Autocomplete mode drops name and required props needed for form participation.
These props are part of the public BaseSelectProps API and are forwarded to SelectPrimitive.Root in the non-autocomplete path (line 224), but they're not included in commonProps and thus missing from ComboboxPrimitive.Root in the autocomplete path. Since ComboboxPrimitive.Root supports both props for native form submission and validation, this inconsistency causes autocomplete selects to behave differently in forms.
Suggested fix
<ComboboxPrimitive.Root
{...commonProps}
+ name={name}
+ required={required}
onInputValueChange={handleSearchValueChange}
filter={itemsProp ? undefined : null}
items={itemsProp}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| if (autocomplete) { | |
| return ( | |
| <SelectContext.Provider value={contextValue}> | |
| <ComboboxPrimitive.Root | |
| {...commonProps} | |
| onInputValueChange={handleSearchValueChange} | |
| filter={itemsProp ? undefined : null} | |
| items={itemsProp} | |
| loopFocus={false} | |
| // @ts-ignore BaseUI types are not up to date | |
| autoHighlight='always' | |
| > | |
| {children} | |
| </ComboboxPrimitive.Root> | |
| </SelectContext.Provider> | |
| ); | |
| } | |
| return ( | |
| <SelectContext.Provider | |
| value={{ | |
| value: computedValue, | |
| registerItem, | |
| unregisterItem, | |
| autocomplete, | |
| autocompleteMode, | |
| searchValue, | |
| multiple, | |
| items, | |
| updateSelectionInProgress, | |
| setValue | |
| }} | |
| > | |
| <SelectPrimitive.Root | |
| autoComplete={htmlAutoComplete} | |
| value={radixValue} | |
| onValueChange={setValue} | |
| open={open} | |
| onOpenChange={handleOpenChange} | |
| {...rest} | |
| > | |
| {autocomplete ? element : children} | |
| <SelectContext.Provider value={contextValue}> | |
| <SelectPrimitive.Root {...commonProps} required={required} name={name}> | |
| if (autocomplete) { | |
| return ( | |
| <SelectContext.Provider value={contextValue}> | |
| <ComboboxPrimitive.Root | |
| {...commonProps} | |
| name={name} | |
| required={required} | |
| onInputValueChange={handleSearchValueChange} | |
| filter={itemsProp ? undefined : null} | |
| items={itemsProp} | |
| loopFocus={false} | |
| // `@ts-ignore` BaseUI types are not up to date | |
| autoHighlight='always' | |
| > | |
| {children} | |
| </ComboboxPrimitive.Root> | |
| </SelectContext.Provider> | |
| ); | |
| } | |
| return ( | |
| <SelectContext.Provider value={contextValue}> | |
| <SelectPrimitive.Root {...commonProps} required={required} name={name}> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/raystack/components/select/select-root.tsx` around lines 204 - 224,
The autocomplete branch is not forwarding the public BaseSelectProps form props
so name and required are missing; update the ComboboxPrimitive.Root invocation
to receive the same form props as the non-autocomplete path by adding name and
required (or include them in commonProps) so ComboboxPrimitive.Root gets name
and required like SelectPrimitive.Root does; locate the autocomplete conditional
using autocomplete, commonProps, ComboboxPrimitive.Root and ensure name and
required from the component props (or from commonProps) are passed through.
| if (autocomplete) { | ||
| return ( | ||
| <SelectContext.Provider value={contextValue}> | ||
| <ComboboxPrimitive.Root | ||
| {...commonProps} | ||
| onInputValueChange={handleSearchValueChange} | ||
| filter={itemsProp ? undefined : null} | ||
| items={itemsProp} | ||
| loopFocus={false} | ||
| // @ts-ignore BaseUI types are not up to date | ||
| autoHighlight='always' | ||
| > | ||
| {children} | ||
| </ComboboxPrimitive.Root> |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
For @base-ui/react Combobox.Root, what is the correct prop for controlling the input text value together with onInputValueChange?
💡 Result:
Use the inputValue prop (controlled), together with onInputValueChange. [1]
Example:
<Combobox.Root inputValue={inputValue} onInputValueChange={setInputValue} />[1] (base-ui.com)
Citations:
🏁 Script executed:
cat -n packages/raystack/components/select/select-root.tsx | sed -n '95,220p'Repository: raystack/apsara
Length of output: 3999
Autocomplete search state is not bound to the combobox input.
Lines 95-119 and 137-143 track searchValue/defaultSearchValue, but the autocomplete branch (204-217) only passes onInputValueChange to ComboboxPrimitive.Root without the corresponding inputValue prop. This leaves the combobox input uncontrolled, allowing the rendered query and internal search state to diverge.
The @base-ui/react Combobox requires both inputValue and onInputValueChange together for proper controlled behavior. Add inputValue={searchValue} to restore synchronization.
Suggested fix
<ComboboxPrimitive.Root
{...commonProps}
+ inputValue={searchValue}
onInputValueChange={handleSearchValueChange}
filter={itemsProp ? undefined : null}
items={itemsProp}
loopFocus={false}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| if (autocomplete) { | |
| return ( | |
| <SelectContext.Provider value={contextValue}> | |
| <ComboboxPrimitive.Root | |
| {...commonProps} | |
| onInputValueChange={handleSearchValueChange} | |
| filter={itemsProp ? undefined : null} | |
| items={itemsProp} | |
| loopFocus={false} | |
| // @ts-ignore BaseUI types are not up to date | |
| autoHighlight='always' | |
| > | |
| {children} | |
| </ComboboxPrimitive.Root> | |
| if (autocomplete) { | |
| return ( | |
| <SelectContext.Provider value={contextValue}> | |
| <ComboboxPrimitive.Root | |
| {...commonProps} | |
| inputValue={searchValue} | |
| onInputValueChange={handleSearchValueChange} | |
| filter={itemsProp ? undefined : null} | |
| items={itemsProp} | |
| loopFocus={false} | |
| // `@ts-ignore` BaseUI types are not up to date | |
| autoHighlight='always' | |
| > | |
| {children} | |
| </ComboboxPrimitive.Root> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/raystack/components/select/select-root.tsx` around lines 204 - 217,
The autocomplete branch leaves the Combobox uncontrolled: when using
ComboboxPrimitive.Root you must pass both the current value and change handler;
update the ComboboxPrimitive.Root invocation in select-root.tsx (the block using
autocomplete) to include the inputValue prop bound to the tracked state
(inputValue={searchValue}) alongside the existing
onInputValueChange={handleSearchValueChange} so the combobox input stays
synchronized with the component's searchValue/defaultSearchValue state.
| iconProps = {}, | ||
| asChild, | ||
| 'aria-label': ariaLabel, |
There was a problem hiding this comment.
Merge iconProps.className instead of overwriting the base icon styles.
iconProps is spread after className={styles.triggerIcon}, so any consumer-supplied class replaces the built-in trigger icon styling. packages/raystack/components/calendar/calendar.tsx already does this for the dropdown trigger, so the base icon positioning/animation styles are dropped there.
🎨 Proposed fix
(
{
@@
- iconProps = {},
+ iconProps = {},
'aria-label': ariaLabel,
...props
},
ref
) => {
const { multiple, autocomplete } = useSelectContext();
+ const { className: iconClassName, ...restIconProps } = iconProps;
@@
<Flex className={styles.triggerContent} align='center' gap={2}>
{children}
</Flex>
<ChevronDownIcon
- className={styles.triggerIcon}
+ className={cva(styles.triggerIcon)({ className: iconClassName })}
aria-hidden='true'
- {...iconProps}
+ {...restIconProps}
/>
</TriggerPrimitive>Also applies to: 72-76
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/raystack/components/select/select-trigger.tsx` around lines 49 - 50,
The component currently spreads iconProps after setting
className={styles.triggerIcon}, which allows consumer iconProps.className to
overwrite the base styling; update both occurrences (the iconProps spread at the
first occurrence and the second occurrence around lines 72-76) to merge class
names instead of overwriting — e.g., compute className={clsx(styles.triggerIcon,
iconProps.className)} (or use the project's existing cx/clsx helper) and spread
the rest of iconProps without its className, keeping symbols iconProps and
styles.triggerIcon and the SelectTrigger/trigger rendering logic intact.
| export const SelectValue = forwardRef<HTMLSpanElement, SelectValueProps>( | ||
| ({ children, placeholder, className, ...props }, ref) => { | ||
| const { value, items, multiple } = useSelectContext(); |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
cat -n packages/raystack/components/select/select-value.tsxRepository: raystack/apsara
Length of output: 2804
Use a block wrapper consistently in SelectValue.
The component returns div elements nested inside span elements, which violates HTML content models and can cause DOM normalization and hydration issues in SSR environments. This occurs at lines 70-77 (where a div directly wraps inside span), and potentially at lines 51-53 and 59-61 if the children prop contains block-level elements.
♻️ Proposed fix
-export const SelectValue = forwardRef<HTMLSpanElement, SelectValueProps>(
+export const SelectValue = forwardRef<HTMLDivElement, SelectValueProps>(
({ children, placeholder, className, ...props }, ref) => {
@@
- <span
+ <div
ref={ref}
data-placeholder=''
className={cx(styles.placeholder, className)}
{...props}
>
{placeholder}
- </span>
+ </div>
@@
- <span ref={ref} className={className} {...props}>
+ <div ref={ref} className={className} {...props}>
{children(item)}
- </span>
+ </div>
@@
- <span ref={ref} className={className} {...props}>
+ <div ref={ref} className={className} {...props}>
{children}
- </span>
+ </div>
@@
- <span ref={ref} className={className} {...props}>
+ <div ref={ref} className={className} {...props}>
<div className={cx(styles.valueContent)}>
{typeof item?.children === 'string' && item?.leadingIcon && (
<div className={styles.itemIcon}>{item.leadingIcon}</div>
)}
{item?.children ?? value}
</div>
- </span>
+ </div>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/raystack/components/select/select-value.tsx` around lines 18 - 20,
SelectValue returns block-level divs inside a span (forwardRef<HTMLSpanElement,
SelectValueProps> component) which breaks HTML semantics and SSR hydration;
update the component to use a consistent block wrapper (e.g., change the outer
element from span to div and adjust the forwarded ref type accordingly) or
ensure inner elements are inline (replace inner divs with spans) so no div is
nested inside a span; locate the SelectValue function that destructures ({
children, placeholder, className, ...props }) and the useSelectContext() usage
and make the wrapper change there and update any ref typing and className/props
passthrough to match the new element.
| const item = useMemo(() => { | ||
| if (!value) return undefined; | ||
| if (multiple && Array.isArray(value)) { | ||
| const itemValues = value.map(v => items[v]); | ||
| if (itemValues.length === 1) return itemValues[0]; | ||
| return itemValues; | ||
| } | ||
| return items[value as string]; | ||
| }, [value, items, multiple]); |
There was a problem hiding this comment.
Guard unresolved multi-select items before rendering chips.
items[v] is populated later by SelectItem's layout effect, so the first render can still produce undefined entries here. In multiple mode that array is passed straight to SelectMultipleValue, which dereferences every item, so a controlled select with preset values can throw before the registry is ready.
🐛 Proposed fix
const item = useMemo(() => {
if (!value) return undefined;
if (multiple && Array.isArray(value)) {
const itemValues = value.map(v => items[v]);
- if (itemValues.length === 1) return itemValues[0];
- return itemValues;
+ if (!itemValues.every(Boolean)) return undefined;
+ return itemValues.length === 1 ? itemValues[0] : itemValues;
}
return items[value as string];
}, [value, items, multiple]);Also applies to: 65-66
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/raystack/components/select/select-value.tsx` around lines 26 - 34,
The current useMemo in select-value.tsx can include undefined entries because
items[v] may not be populated yet; update the logic in the useMemo that computes
item (and the analogous logic around lines 65-66) to filter out falsy/undefined
results from itemValues (e.g., const itemValues = value.map(v =>
items[v]).filter(Boolean)) before returning, and ensure you still return
undefined when the filtered array is empty, return the single item when length
=== 1, or return the filtered array for multiple values so SelectMultipleValue
never receives undefined entries.
| /* .content:not([data-multiselectable="true"]) .menuitem[data-selected] { | ||
| background: var(--rs-color-background-neutral-secondary); | ||
| } | ||
| } */ |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check if data-selected attribute is manually added in select-item.tsx
rg -n 'data-selected' packages/raystack/components/select/Repository: raystack/apsara
Length of output: 189
🏁 Script executed:
cat -n packages/raystack/components/select/select-item.tsx | head -100Repository: raystack/apsara
Length of output: 3152
🏁 Script executed:
cat -n packages/raystack/components/select/select.module.cssRepository: raystack/apsara
Length of output: 9117
🏁 Script executed:
rg -n 'menuitem' packages/raystack/components/select/select.module.cssRepository: raystack/apsara
Length of output: 411
Add visual distinction for selected items in single-select mode.
The [data-selected] styling rule is currently commented out (lines 40-42), and the data-selected attribute is never added to menu items in select-item.tsx. This means selected items in single-select mode have no visual distinction within the dropdown.
In multi-select mode, a Checkbox component provides visual feedback (line 88), but single-select mode relies only on the trigger displaying the value. To fix this, either:
- Uncomment the rule and add
data-selected={state.selected || undefined}to the ItemPrimitive render (line 79) - Remove the commented rule and document that visual selection indication is intentionally omitted in single-select mode
- Implement an alternative visual indicator
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/raystack/components/select/select.module.css` around lines 40 - 42,
The dropdown lacks a visual cue for selected items in single-select mode because
the CSS rule in select.module.css is commented out and Item rendering in
select-item.tsx never sets the data-selected attribute; fix by uncommenting or
restoring the CSS rule that targets .menuitem[data-selected] and update the
ItemPrimitive render in select-item.tsx to set data-selected={state.selected ||
undefined} (or implement an alternate visual indicator) so selected items show
the intended background; ensure this change only applies when
data-multiselectable != "true" to preserve the existing multi-select Checkbox
behavior.
2 participants
Description
[Provide a brief description of the changes in this PR]
Type of Change
How Has This Been Tested?
[Describe the tests that you ran to verify your changes]
Checklist:
Screenshots (if appropriate):
[Add screenshots here]
Related Issues
[Link any related issues here using #issue-number]
Summary by CodeRabbit
Refactor
Tests