Controlled Input with Box, Stack

[vitran12]

Hi everyone

What happened:
When using the Input component as a Controlled input the value changes, the cursor unfocuses from the input field.

What you expected to happen:
The cursor should remain focused on the input field even when the value changes.

How to reproduce it (as minimally and precisely as possible):

import { useState } from "react";
import { Input, Label, Stack } from "@/component/ui";

function App() {
  const [data, setData] = useState("");
  return (
    <Stack w="300" p="4">
      <Label htmlFor="title">Title</Label>
      <Input onChange={(e) => setData(e.target.value)} value={data} />
    </Stack>
  );
}

export default App;

Anything else we need to know?:

2024-04-07.2.23.10.mov

[kiruushaaa]

It seems there is something wrong with your ui-kit components implementation since the code snippet below works as expected (0.37.2)

import { useState } from 'react';
import { Stack } from 'styled-system/jsx';

export const App = () => {
  const [val, setVal] = useState('');

  return (
    <>
      <Stack>
        <label htmlFor="test-id">test</label>
        <input type="text" id="test-id" value={val} onChange={e => setVal(e.target.value)}/>
      </Stack>
    </>
  );
};