chore: add changes from PR 668

Author: AbhinavMV

packages/core/src/lib/Todo/Todo.tsx

@@ -29,18 +29,21 @@ const Todo: React.FC<TodoProps> = ({
 }) => {
     const key = useMemo(() => Math.random(), []);
     const [inputValue, setInputValue] = useState<string>('');
+    const [isInputVlaid, setIsInputValid] = useState<boolean>(false);
     const [lists, setLists] = useState<string[]>(todos);
-
     useEffect(() => onChange && onChange(lists), [lists]);
     useEffect(() => setLists(todos), [todos]);
+    useEffect(() => {
+        const expression = new RegExp(pattern || '(.*?)');
+        setIsInputValid(expression.test(inputValue));
+    }, [inputValue]);
 
     const removeTodo = (id: number) => {
         const updatedList = lists.filter((item) => item !== lists[id]);
         setLists([...updatedList]);
     };
 
-    const addTodo = (e: any) => {
-        e.preventDefault();
+    const addTodo = () => {
         setLists((prevTodo) => Array.from(new Set([...prevTodo, inputValue])));
         setInputValue('');
         const input: HTMLInputElement | null = document.querySelector(
@@ -52,40 +55,41 @@ const Todo: React.FC<TodoProps> = ({
 
     return (
         <SectionStyled data-testid="test-todo" {...props}>
-            <form onSubmit={addTodo}>
-                <DivStyled>
-                    <Input
-                        id="todo-input"
-                        label={label}
-                        onChange={(e) => setInputValue(e.target.value)}
-                        size="large"
-                        validation={{
-                            regExp: pattern,
-                            required: true,
-                        }}
-                        key={key}
-                        value={inputValue}
-                    />
-                    <Button
-                        type="submit"
-                        disabled={!inputValue}
-                        icon={
-                            <Plus title="plus icon" titleId="todo plus icon" />
-                        }
-                        size="large"
-                        text={buttonText}
-                        theme="primary"
-                    />
-                </DivStyled>
-            </form>
+            <DivStyled>
+                <Input
+                    id="todo-input"
+                    label={label}
+                    onChange={(e) => setInputValue(e.target.value)}
+                    size="large"
+                    validation={{
+                        regExp: pattern,
+                        required: true,
+                    }}
+                    key={key}
+                    value={inputValue}
+                />
+
+                <Button
+                    disabled={!isInputVlaid}
+                    icon={<Plus title="plus icon" titleId="todo plus icon" />}
+                    onClick={addTodo}
+                    size="large"
+                    text={buttonText}
+                    theme="primary"
+                />
+            </DivStyled>
 
             <DivStyledContent
                 data-testid="test-todo_content"
                 fullWidth={fullWidth}
             >
                 {lists.map((todo, i) => (
                     <Tag
-                        color={i < 8 ? colors[i] : colors[i % 8]}
+                        color={
+                            i < colors.length
+                                ? colors[i]
+                                : colors[i % colors.length]
+                        }
                         hasCancel
                         key={i}
                         onCancelClick={() => removeTodo(i)}