Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Input control validation on focus out event #2036

Merged
merged 16 commits into from
Dec 2, 2024
Merged

Input control validation on focus out event #2036

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
9eb25aa
FocusOutEventTrap
Oct 12, 2024
f3c0e33
Merge branch 'develop' into bug/#2023-trap-focus-out
kart2004 Oct 12, 2024
f231a17
Merge branch 'develop' into bug/#2023-trap-focus-out
FredLL-Avaiga Oct 22, 2024
4235d80
Merge branch 'develop' into bug/#2023-trap-focus-out
FredLL-Avaiga Oct 24, 2024
2832e3e
Merge branch 'develop' into bug/#2023-trap-focus-out
FredLL-Avaiga Oct 25, 2024
fddf134
Merge branch 'develop' into bug/#2023-trap-focus-out
FredLL-Avaiga Nov 2, 2024
479a710
Merge branch 'develop' into bug/#2023-trap-focus-out
FredLL-Avaiga Nov 7, 2024
9ac7bb1
Merge branch 'develop' into bug/#2023-trap-focus-out
FabienLelaquais Nov 15, 2024
848ae8c
Merge branch 'develop' into bug/#2023-trap-focus-out
FabienLelaquais Nov 15, 2024
0f23946
Merge branch 'develop' into bug/#2023-trap-focus-out
FabienLelaquais Nov 17, 2024
7718a03
Merge branch 'develop' into bug/#2023-trap-focus-out
FabienLelaquais Nov 19, 2024
613265e
Merge branch 'develop' into bug/#2023-trap-focus-out
FabienLelaquais Dec 1, 2024
086f946
Added the action_on_blur property to 'input' and 'number'
FabienLelaquais Dec 2, 2024
76ba0d3
Fix tsx
FabienLelaquais Dec 2, 2024
8858120
Fix test
FabienLelaquais Dec 2, 2024
d43d739
Merge branch 'develop' into bug/#2023-trap-focus-out
FabienLelaquais Dec 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
123 changes: 73 additions & 50 deletions frontend/taipy-gui/src/components/Taipy/Input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,9 @@ const getActionKeys = (keys?: string): string[] => {
const ak = (
keys
? keys
.split(";")
.map((v) => v.trim().toLowerCase())
.filter((v) => AUTHORIZED_KEYS.some((k) => k.toLowerCase() === v))
.split(";")
.map((v) => v.trim().toLowerCase())
.filter((v) => AUTHORIZED_KEYS.some((k) => k.toLowerCase() === v))
: []
).map((v) => AUTHORIZED_KEYS.find((k) => k.toLowerCase() == v) as string);
return ak.length > 0 ? ak : [AUTHORIZED_KEYS[0]];
Expand Down Expand Up @@ -63,6 +63,7 @@ const Input = (props: TaipyInputProps) => {
onAction,
onChange,
multiline = false,
actionOnBlur = false,
linesShown = 5,
} = props;

Expand All @@ -85,9 +86,9 @@ const Input = (props: TaipyInputProps) => {
() =>
props.width
? {
...numberSx,
maxWidth: getCssSize(props.width),
}
...numberSx,
maxWidth: getCssSize(props.width),
}
: numberSx,
[props.width]
);
Expand Down Expand Up @@ -138,6 +139,27 @@ const Input = (props: TaipyInputProps) => {
[changeDelay, dispatch, updateVarName, module, onChange, propagate]
);

const handleBlur = useCallback(
(evt: React.FocusEvent<HTMLInputElement>) => {
let val = (type === "number")
FabienLelaquais marked this conversation as resolved.
Show resolved Hide resolved
? Number(evt.currentTarget.querySelector("input")?.value)
: (multiline
? evt.currentTarget.querySelector("textarea")?.value
: evt.currentTarget.querySelector("input")?.value)
;
if (delayCall.current > 0) {
if (changeDelay > 0) {
clearTimeout(delayCall.current);
delayCall.current = -1;
}
dispatch(createSendUpdateAction(updateVarName, val, module, onChange, propagate));
}
onAction && dispatch(createSendActionNameAction(id, module, onAction, "Tab", updateVarName, val));
FabienLelaquais marked this conversation as resolved.
Show resolved Hide resolved
evt.preventDefault();
},
[dispatch, updateVarName, module, onChange, propagate, changeDelay]
);

const handleAction = useCallback(
(evt: KeyboardEvent<HTMLDivElement>) => {
if (evt.shiftKey && type === "number") {
Expand Down Expand Up @@ -265,51 +287,51 @@ const Input = (props: TaipyInputProps) => {
() =>
type == "number"
? {
htmlInput: {
step: step ? step : 1,
min: min,
max: max,
},
input: {
endAdornment: (
<div style={verticalDivStyle}>
<IconButton
aria-label="Increment value"
size="small"
onMouseDown={handleUpStepperMouseDown}
disabled={!active}
>
<ArrowDropUpIcon fontSize="inherit" />
</IconButton>
<IconButton
aria-label="Decrement value"
size="small"
onMouseDown={handleDownStepperMouseDown}
disabled={!active}
>
<ArrowDropDownIcon fontSize="inherit" />
</IconButton>
</div>
),
},
}
htmlInput: {
step: step ? step : 1,
min: min,
max: max,
},
input: {
endAdornment: (
<div style={verticalDivStyle}>
<IconButton
aria-label="Increment value"
size="small"
onMouseDown={handleUpStepperMouseDown}
disabled={!active}
>
<ArrowDropUpIcon fontSize="inherit" />
</IconButton>
<IconButton
aria-label="Decrement value"
size="small"
onMouseDown={handleDownStepperMouseDown}
disabled={!active}
>
<ArrowDropDownIcon fontSize="inherit" />
</IconButton>
</div>
),
},
}
: type == "password"
? {
htmlInput: { autoComplete: "current-password" },
input: {
endAdornment: (
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword}
onMouseDown={handleMouseDownPassword}
edge="end"
>
{showPassword ? <VisibilityOff /> : <Visibility />}
</IconButton>
),
},
}
: undefined,
? {
htmlInput: { autoComplete: "current-password" },
input: {
endAdornment: (
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword}
onMouseDown={handleMouseDownPassword}
edge="end"
>
{showPassword ? <VisibilityOff /> : <Visibility />}
</IconButton>
),
},
}
: undefined,
[
active,
type,
Expand Down Expand Up @@ -344,6 +366,7 @@ const Input = (props: TaipyInputProps) => {
slotProps={inputProps}
label={props.label}
onChange={handleInput}
onBlur={actionOnBlur ? handleBlur : undefined}
disabled={!active}
onKeyDown={handleAction}
multiline={multiline}
Expand Down
1 change: 1 addition & 0 deletions frontend/taipy-gui/src/components/Taipy/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ export interface TaipyInputProps extends TaipyActiveProps, TaipyChangeProps, Tai
changeDelay?: number;
onAction?: string;
actionKeys?: string;
actionOnBlur?: boolean;
multiline?: boolean;
linesShown?: number;
width?: string | number;
Expand Down
2 changes: 2 additions & 0 deletions taipy/gui/_renderers/factory.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -326,6 +326,7 @@ class _Factory:
("action_keys",),
("label",),
("change_delay", PropertyType.number, gui._get_config("change_delay", None)),
("action_on_blur", PropertyType.boolean, False),
("multiline", PropertyType.boolean, False),
("lines_shown", PropertyType.number, 5),
("width", PropertyType.string_or_number),
Expand Down Expand Up @@ -434,6 +435,7 @@ class _Factory:
("on_action", PropertyType.function),
("label",),
("change_delay", PropertyType.number, gui._get_config("change_delay", None)),
("action_on_blur", PropertyType.boolean, False),
("width", PropertyType.string_or_number),
]
),
Expand Down
6 changes: 3 additions & 3 deletions taipy/gui/gui.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1155,9 +1155,9 @@ def set_unsupported_data_converter(converter: t.Optional[t.Callable[[t.Any], t.A

Arguments:
converter: A function that converts a value with an unsupported data type (the only
parameter to the function) into data with a supported data type (the returned value
from the function).</br>
If set to `None`, it removes any existing converter.
parameter to the function) into data with a supported data type (the returned value
from the function).</br>
If set to `None`, it removes any existing converter.
"""
Gui.__unsupported_data_converter = converter

Expand Down
Loading
Loading