mirror of
https://github.com/Unleash/unleash.git
synced 2025-07-31 13:47:02 +02:00
Chore(1 3895)/small input tweaks (#10316)
Doesn't clear the value from the constraint input value popover if you close it and then re-open. In other words, if you accidentally click out, you don't lose your progress. Instead, the popover will open again, with the value you had when you closed it highlighted (so that it's easy to type over if you want to): <img width="452" alt="image" src="https://github.com/user-attachments/assets/d86aa00e-4956-40a8-8fea-e75be5d5425b" /> The reason I'm changing this now is because I noticed that the error wasn't cleared correctly when the popover was closed. If we do it this way instead, then that makes sense, because you can still see the value. This is also how the single-value popover has worked forever. From some quick testing, the single value popover still works as expected: <img width="562" alt="image" src="https://github.com/user-attachments/assets/9041a922-b055-4310-ab60-93ad219981a4" /> As a side note: I'm adding a comment to anyone coming after as to why focus handling on escape doesn't work correctly on the single value button. I was about to go down a rabbit hole on that before I read my own comment on the previous PR. So I thought I'd put that here too.
This commit is contained in:
parent
37aaf60aa5
commit
cb4beb71ac
@ -5,6 +5,13 @@ import { ValueChip } from './ValueList.tsx';
|
||||
import { AddValuesPopover, type OnAddActions } from './AddValuesPopover.tsx';
|
||||
import type { ConstraintValidatorOutput } from './ConstraintValidatorOutput.ts';
|
||||
|
||||
// No, escape handling doesn't work correctly with chips and popovers in MUI v5.
|
||||
// This is an intentional trade-off for now because the chip makes it easy to
|
||||
// use delete/backspace to clear the value and otherwise works pretty well (cf
|
||||
// https://github.com/Unleash/unleash/pull/9859).
|
||||
//
|
||||
// In MUI v6 and onwards this will "just work"
|
||||
// (https://mui.com/material-ui/migration/upgrade-to-v6/#chip)
|
||||
const StyledChip = styled(ValueChip, {
|
||||
shouldForwardProp: (prop) => prop !== 'hasValue',
|
||||
})<{ hasValue: boolean }>(({ theme, hasValue }) => ({
|
||||
|
@ -80,14 +80,7 @@ export const AddValuesPopover: FC<AddValuesProps> = ({
|
||||
<StyledPopover
|
||||
open={open}
|
||||
onTransitionEnter={() => {
|
||||
if (inputValue && !initialValue?.trim()) {
|
||||
// if the input value is not empty and the current value is
|
||||
// empty or whitespace
|
||||
setInputValue('');
|
||||
} else if (inputValue) {
|
||||
// select the text in the input field
|
||||
inputRef?.current?.select();
|
||||
}
|
||||
inputRef?.current?.select();
|
||||
}}
|
||||
disableScrollLock
|
||||
anchorEl={anchorEl}
|
||||
|
Loading…
Reference in New Issue
Block a user