codeant-ai-for-open-source[bot] commented on code in PR #38093:
URL: https://github.com/apache/superset/pull/38093#discussion_r2827252343
##########
superset-frontend/src/features/alerts/AlertReportModal.tsx:
##########
@@ -2502,28 +2499,25 @@ const AlertReportModal:
FunctionComponent<AlertReportModalProps> = ({
)}
</div>
))}
- <div className="filters-add-container">
- {filterNativeFilterOptions().length > 0 && (
- // eslint-disable-next-line
jsx-a11y/anchor-is-valid
- <a
- className="filters-add-btn"
- role="button"
- tabIndex={0}
- onClick={() => {
+ {filterNativeFilterOptions().length > 0 && (
+ // eslint-disable-next-line
jsx-a11y/anchor-is-valid
+ <Button
+ className="filters-add-btn"
+ buttonStyle="link"
+ onClick={() => {
+ handleAddFilterField();
+ add();
+ }}
+ onKeyDown={e => {
+ if (e.key === 'Enter' || e.key === ' ') {
handleAddFilterField();
add();
- }}
- onKeyDown={e => {
- if (e.key === 'Enter' || e.key === ' ') {
- handleAddFilterField();
- add();
- }
- }}
- >
- + {t('Apply another dashboard filter')}
- </a>
- )}
- </div>
+ }
Review Comment:
**Suggestion:** The add-filter button defines both `onClick` and `onKeyDown`
handlers that call the same logic, so pressing Enter or Space while the button
is focused will likely trigger both events and add two filter rows instead of
one, leading to duplicated filters and inconsistent form state. [logic error]
<details>
<summary><b>Severity Level:</b> Major ⚠️</summary>
```mdx
- ⚠️ Keyboard users add two filters per activation.
- ⚠️ Extra blank filter rows clutter alert contents form.
- ⚠️ Inconsistent behavior between mouse and keyboard interactions.
```
</details>
```suggestion
```
<details>
<summary><b>Steps of Reproduction ✅ </b></summary>
```mdx
1. Open the Alerts & Reports UI so that `AlertReportModal` is rendered
(modal component
defined at
`superset-frontend/src/features/alerts/AlertReportModal.tsx:2050-2562`).
2. In the "Alert contents" section of the modal, select a dashboard and
ensure feature
flag–controlled filters are enabled so that the native filter UI (Form.List
`name="filters"`) renders (container at `AlertReportModal.tsx:2417-2525`).
3. Tab keyboard focus to the "+ Apply another dashboard filter" control,
which is the
`<Button>` using `className="filters-add-btn"` inside the filters list
(button defined at
`AlertReportModal.tsx:2502-2519` with both `onClick` and `onKeyDown`
handlers calling
`handleAddFilterField(); add();`).
4. Press Space or Enter: React will fire the `onKeyDown` handler (adding one
filter row)
and, because this is a real `<button>`-backed component, the browser will
also dispatch a
click event that triggers `onClick` (adding a second filter row), resulting
in two new
filter rows being appended for a single keypress.
```
</details>
<details>
<summary><b>Prompt for AI Agent 🤖 </b></summary>
```mdx
This is a comment left during a code review.
**Path:** superset-frontend/src/features/alerts/AlertReportModal.tsx
**Line:** 2511:2515
**Comment:**
*Logic Error: The add-filter button defines both `onClick` and
`onKeyDown` handlers that call the same logic, so pressing Enter or Space while
the button is focused will likely trigger both events and add two filter rows
instead of one, leading to duplicated filters and inconsistent form state.
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%2F38093&comment_hash=e158d2810a86dfe070d60223689832199cecdc587fc6e99f34454ef3056b8c12&reaction=like'>👍</a>
| <a
href='https://app.codeant.ai/feedback?pr_url=https%3A%2F%2Fgithub.com%2Fapache%2Fsuperset%2Fpull%2F38093&comment_hash=e158d2810a86dfe070d60223689832199cecdc587fc6e99f34454ef3056b8c12&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]
