sadpandajoe opened a new pull request, #42090:
URL: https://github.com/apache/superset/pull/42090
### SUMMARY
The **Screenshot width** field (and the alert **Value**/threshold field) in
the Alert/Report modal rendered a "box within a box": a bordered input nested
inside the already-bordered `InputNumber` control, with native browser number
spinners layered on top of antd's own step handles.
**Root cause:** both fields passed `type="number"` to antd's `InputNumber`.
antd forwards unrecognized props to the inner `<input>`, so it became `<input
type="number">`. That matched a rule in the modal's `StyledInputContainer`
styled component:
```css
input[type='number'] {
padding: ...;
border: 1px solid ${theme.colorBorder};
border-radius: ${theme.borderRadius}px;
}
```
which gave the inner `<input>` its own border/padding on top of the wrapping
`.ant-input-number` border — hence the nested box. The `type` prop was
redundant anyway: `InputNumber` already restricts input to numeric values.
The fix removes `type="number"` from both `InputNumber` instances so the
component owns its single border. Other `type="number"` usages in the codebase
are on antd's plain `Input` (a single bordered element) and are unaffected.
### BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
Rendered with the project's antd version and the exact
`StyledInputContainer` CSS:
- **Before:** inner `<input>` computes `border: 1px solid rgb(217, 217,
217)` (visible box-in-box).
- **After:** inner `<input>` computes `border: 0px none` — a single clean
input.
### TESTING INSTRUCTIONS
1. Go to **Settings → Alerts & Reports** and create a new report.
2. Under **Report Contents**, note the **Screenshot width** field.
3. Confirm it renders as a single input (no nested box) and shows only
antd's up/down step handles on hover — no duplicated native browser spinners.
4. Repeat for a new alert's **Value** (threshold) field under Alert
Condition.
Unit tests: `AlertReportModal.test.tsx` passes (68/68).
### ADDITIONAL INFORMATION
- [ ] Has associated issue:
- [ ] Required feature flags:
- [x] Changes UI
- [ ] Includes DB Migration
- [ ] Introduces new feature or API
- [ ] Removes existing feature or API
--
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]
