diff --git a/frontend/src/lib/lemon-ui/LemonInput/LemonInput.tsx b/frontend/src/lib/lemon-ui/LemonInput/LemonInput.tsx index aa8f6f32a964b..9d32f6de6f767 100644 --- a/frontend/src/lib/lemon-ui/LemonInput/LemonInput.tsx +++ b/frontend/src/lib/lemon-ui/LemonInput/LemonInput.tsx @@ -68,7 +68,7 @@ export interface LemonInputPropsNumber extends LemonInputPropsBase, Pick, 'step' | 'min' | 'max'> { type: 'number' - value?: number + value?: number | null defaultValue?: number onChange?: (newValue: number | undefined) => void } @@ -154,6 +154,10 @@ export const LemonInput = React.forwardRef(func const InputComponent = autoWidth ? RawInputAutosize : 'input' + if (value == null) { + value = '' + } + return ( (savedDuration) const handleChange = (duration: number | undefined): void => { - updateCurrentTeam({ modifiers: { ...currentTeam?.modifiers, bounceRateDurationSeconds: duration } }) + if (Number.isNaN(duration)) { + duration = undefined + } + updateCurrentTeam({ + modifiers: { ...currentTeam?.modifiers, bounceRateDurationSeconds: duration }, + }) } + const inputRef = React.useRef(null) + return ( <>

- Choose how long a user can stay on a page, in seconds, before the session is not a bounce. The default - is 10 seconds. + Choose how long a user can stay on a page, in seconds, before the session is not a bounce. Leave blank + to use the default of 10 seconds, or set a custom value between 1 second and 120 seconds inclusive.

- + { + if (x == null || Number.isNaN(x)) { + setBounceRateDuration(undefined) + } else { + setBounceRateDuration(x) + } + }} + inputRef={inputRef} + suffix={ + } + tooltip="Clear input" + onClick={(e) => { + e.stopPropagation() + setBounceRateDuration(undefined) + inputRef.current?.focus() + }} + /> + } + />
handleChange(bounceRateDuration)} - disabledReason={bounceRateDuration === savedDuration ? 'No changes to save' : undefined} + disabledReason={ + bounceRateDuration === savedDuration + ? 'No changes to save' + : bounceRateDuration == undefined + ? undefined + : isNaN(bounceRateDuration) + ? 'Invalid number' + : bounceRateDuration < MIN_BOUNCE_RATE_DURATION + ? `Duration must be at least ${MIN_BOUNCE_RATE_DURATION} second` + : bounceRateDuration > MAX_BOUNCE_RATE_DURATION + ? `Duration must be less than ${MAX_BOUNCE_RATE_DURATION} seconds` + : undefined + } > Save