From 321b259a4b3c0ea735dc2c433047825e0b1d03e9 Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Mon, 16 Aug 2021 11:40:14 +0200
Subject: [PATCH] fixed focus and min value (#999)

fixes: #405
---
 src/clients/advanced/TokenLifespan.tsx        | 24 +++++++++++++------
 src/components/time-selector/TimeSelector.tsx |  3 ++-
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/clients/advanced/TokenLifespan.tsx b/src/clients/advanced/TokenLifespan.tsx
index 4b29ad46aa..bf5c876a86 100644
--- a/src/clients/advanced/TokenLifespan.tsx
+++ b/src/clients/advanced/TokenLifespan.tsx
@@ -37,6 +37,13 @@ export const TokenLifespan = ({
   const { t } = useTranslation("clients");
   const [open, setOpen] = useState(false);
 
+  const [focused, setFocused] = useState(false);
+  const onFocus = () => setFocused(true);
+  const onBlur = () => setFocused(false);
+
+  const isExpireSet = (value: string | number) =>
+    (typeof value === "number" && value !== -1) || focused;
+
   return (
     <FormGroup
       label={t(id)}
@@ -66,19 +73,22 @@ export const TokenLifespan = ({
                   onChange(value);
                   setOpen(false);
                 }}
-                selections={[
-                  typeof value === "number" && value !== -1
-                    ? t(expires)
-                    : t(never),
-                ]}
+                selections={[isExpireSet(value) ? t(expires) : t(never)]}
               >
                 <SelectOption value={-1}>{t(never)}</SelectOption>
                 <SelectOption value={60}>{t(expires)}</SelectOption>
               </Select>
             </SplitItem>
             <SplitItem>
-              {typeof value === "number" && value !== -1 && (
-                <TimeSelector units={units} value={value} onChange={onChange} />
+              {isExpireSet(value) && (
+                <TimeSelector
+                  units={units}
+                  value={value}
+                  onChange={onChange}
+                  onFocus={onFocus}
+                  onBlur={onBlur}
+                  min={1}
+                />
               )}
             </SplitItem>
           </Split>
diff --git a/src/components/time-selector/TimeSelector.tsx b/src/components/time-selector/TimeSelector.tsx
index 077f9b1252..a1f7b9f937 100644
--- a/src/components/time-selector/TimeSelector.tsx
+++ b/src/components/time-selector/TimeSelector.tsx
@@ -24,6 +24,7 @@ export const TimeSelector = ({
   units = ["seconds", "minutes", "hours", "days"],
   onChange,
   className,
+  min,
   ...rest
 }: TimeSelectorProps) => {
   const { t } = useTranslation("common");
@@ -84,7 +85,7 @@ export const TimeSelector = ({
           type="number"
           id={`kc-time-${new Date().getTime()}`}
           aria-label="kc-time"
-          min="0"
+          min={min || 0}
           value={timeValue}
           className={`${className}-input`}
           onChange={(value) => {