codeant-ai-for-open-source[bot] commented on code in PR #38470:
URL: https://github.com/apache/superset/pull/38470#discussion_r2913327666
##########
superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx:
##########
@@ -504,39 +560,53 @@ export default function PluginFilterSelect(props:
PluginFilterSelectProps) {
onChange={handleExclusionToggle}
/>
)}
- <Select
- name={formData.nativeFilterId}
- allowClear
- allowNewOptions={!searchAllOptions && creatable !== false}
- allowSelectAll={!searchAllOptions}
- value={multiSelect ? filterState.value || [] : filterState.value}
- disabled={isDisabled}
- getPopupContainer={
- showOverflow
- ? () => (parentRef?.current as HTMLElement) || document.body
- : (trigger: HTMLElement) =>
- (trigger?.parentNode as HTMLElement) || document.body
- }
- showSearch={showSearch}
- mode={multiSelect ? 'multiple' : 'single'}
- placeholder={placeholderText}
- onClear={() => onSearch('')}
- onSearch={onSearch}
- onBlur={handleBlur}
- onFocus={setFocusedFilter}
- onMouseEnter={setHoveredFilter}
- onMouseLeave={unsetHoveredFilter}
- // @ts-expect-error
- onChange={handleChange}
- ref={inputRef}
- loading={isRefreshing}
- oneLine={filterBarOrientation === FilterBarOrientation.Horizontal}
- invertSelection={inverseSelection && excludeFilterValues}
- options={options}
- sortComparator={sortComparator}
- onOpenChange={setFilterActive}
- className="select-container"
- />
+ {isLikeOperator ? (
+ <Input
+ allowClear
+ placeholder={likeInputPlaceholder}
+ value={likeInputValue}
+ onChange={handleLikeInputChange}
+ onFocus={setFocusedFilter}
+ onBlur={unsetFocusedFilter}
+ onMouseEnter={setHoveredFilter}
+ onMouseLeave={unsetHoveredFilter}
+ disabled={isDisabled}
+ />
+ ) : (
Review Comment:
**Suggestion:** When the LIKE/ILIKE text input is rendered, the shared
`inputRef` prop is no longer attached to any DOM element, so external code
(e.g., filter bar keyboard navigation/focus management) that relies on
`inputRef.current` to focus the filter will silently stop working for
LIKE-based filters. [logic error]
<details>
<summary><b>Severity Level:</b> Major ⚠️</summary>
```mdx
- ⚠️ Native Select filters with LIKE operators lose auto-focus behavior.
- ⚠️ Keyboard navigation in `FilterValue.tsx` skips LIKE-based filters.
- ⚠️ Accessibility degraded for text-match Select filters in filter bar.
```
</details>
```suggestion
{isLikeOperator ? (
<Input
allowClear
placeholder={likeInputPlaceholder}
value={likeInputValue}
onChange={handleLikeInputChange}
onFocus={setFocusedFilter}
onBlur={unsetFocusedFilter}
onMouseEnter={setHoveredFilter}
onMouseLeave={unsetHoveredFilter}
disabled={isDisabled}
ref={inputRef}
/>
) : (
```
<details>
<summary><b>Steps of Reproduction ✅ </b></summary>
```mdx
1. Open a dashboard using native filters; the filter bar renders
`FilterValue` from
`superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx`,
which creates `const inputRef = useRef<HTMLInputElement>(null);` (line ~141
from Grep) and
passes it to the chart plugin as `inputRef={inputRef}` (line 409 in the same
file per Grep
output).
2. Configure a "Value (Select)" native filter on a string column and, in the
filter
configuration modal, select a non-exact match type (e.g., "Contains text
(ILIKE %x%)").
This sets `operatorType` on the form data so that in `PluginFilterSelect`
(`superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx`
lines 165–168)
`isLikeOperator` becomes `true` for this filter.
3. When the dashboard renders, the Select filter for that column is
implemented by
`PluginFilterSelect`, which destructures `inputRef` from props (line 137)
but, for the
LIKE case, renders the `<Input>` block at lines 563–574 **without** attaching
`ref={inputRef}`. In contrast, the non-LIKE branch attaches `ref={inputRef}`
to the
`<Select>` at line 600.
4. Trigger focus behavior in the filter bar (for example, by selecting the
filter so it
becomes outlined/active). The effect in `FilterValue.tsx` around lines
290–295 calls
`inputRef?.current?.focus();`, expecting the plugin to have wired `inputRef`
to the actual
input element. Because the LIKE `<Input>` never receives `ref={inputRef}`,
`inputRef.current` remains `null`, the focus call becomes a no-op, and the
LIKE-based
Select filter does not receive programmatic focus (breaking keyboard
navigation/auto-focus) while other Select filters continue to work.
```
</details>
<details>
<summary><b>Prompt for AI Agent 🤖 </b></summary>
```mdx
This is a comment left during a code review.
**Path:**
superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx
**Line:** 563:575
**Comment:**
*Logic Error: When the LIKE/ILIKE text input is rendered, the shared
`inputRef` prop is no longer attached to any DOM element, so external code
(e.g., filter bar keyboard navigation/focus management) that relies on
`inputRef.current` to focus the filter will silently stop working for
LIKE-based filters.
Validate the correctness of the flagged issue. If correct, How can I resolve
this? If you propose a fix, implement it and please make it concise.
```
</details>
<a
href='https://app.codeant.ai/feedback?pr_url=https%3A%2F%2Fgithub.com%2Fapache%2Fsuperset%2Fpull%2F38470&comment_hash=fc746871318fc6e94275bdd259be9f60e2cb58863720bd4ec783f61e8e5a9fdf&reaction=like'>👍</a>
| <a
href='https://app.codeant.ai/feedback?pr_url=https%3A%2F%2Fgithub.com%2Fapache%2Fsuperset%2Fpull%2F38470&comment_hash=fc746871318fc6e94275bdd259be9f60e2cb58863720bd4ec783f61e8e5a9fdf&reaction=dislike'>👎</a>
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
