[Bug]: inputs in Modals lose focus every key press

[Ashot Nazaryan]

Contact Details

No response

What happened?

I am using a custom component that is a modal with an input field in it. Every onChange event causes a re-render and the input loses focus.

Bug prevalence

Often

AdminJS dependencies version

 "@adminjs/design-system": "4.0.3",
 "@adminjs/koa": "4.1.0",
 "adminjs": "7.5.10",

What browsers do you see the problem on?

Firefox

Relevant log output

No response

Relevant code that's giving you issues

import React, { useState } from 'react'
import { Button, FormGroup, Input, InputGroup, Modal } from '@adminjs/design-system'
import { ApiClient, BasePropertyProps } from 'adminjs'

const ModalExample = (props: BasePropertyProps) => {
  const { record, resource } = props
  if (!record) throw new Error('Missing record')
  const { params } = record

  const [amount, setAmount] = useState(0)

  const api = new ApiClient()

  return (
    <Modal>
      <form
        onSubmit={(e) => {
          e.preventDefault()
          api.recordAction({
            actionName: 'asdf',
            resourceId: resource.id,
            recordId: record.id,
            data: {
              amount
            }
          })
        }}
      >
        <FormGroup>
          <div
            style={{ display: 'flex', flexDirection: 'column', gap: '10px', justifyContent: 'space-between' }}
          >
            <InputGroup>
              <label>
                Amount:{' '}
                <Input
                  placeholder="Base APY"
                  type="number"
                  value={amount}
                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => setAmount(parseFloat(e.target.value))}
                />
              </label>
            </InputGroup>
            <Button variant="success" type="submit">
              Submit
            </Button>
          </div>
        </FormGroup>
      </form>
    </Modal>
  )
}

export default ModalExample