fix: onChange can also update other fields

example-app/cypress/integration/nested/create-nested.spec.js

@@ -0,0 +1,19 @@
+/// <reference types="cypress" />
+/// <reference types="../../support" />
+
+context('resources/Nested/actions/new', () => {
+  before(() => {
+    cy.login()
+  })
+
+  beforeEach(() => {
+    Cypress.Cookies.preserveOnce(Cypress.env('COOKIE_NAME'))
+    cy.visit('resources/Nested/actions/new')
+  })
+
+  it('fills name when button is clicked', () => {
+    cy.get('[data-testid="name-button"]').click()
+    cy.get('[data-testid="property-edit-name"] input')
+      .should('have.value', 'my new name')
+  })
+})

example-app/src/nested/nested.admin.js

@@ -1,8 +1,15 @@
+const { default: AdminBro } = require('admin-bro')
 const { Nested } = require('./nested.entity')
 
 /** @type {import('admin-bro').ResourceOptions} */
 const options = {
-
+  properties: {
+    valueTrigger: {
+      components: {
+        edit: AdminBro.bundle('./value-trigger.component.tsx'),
+      },
+    },
+  },
 }
 
 module.exports = {

example-app/src/nested/value-trigger.component.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { EditPropertyProps } from 'admin-bro'
+import { Button, Box } from '@admin-bro/design-system'
+
+const ValueTrigger: React.FC<EditPropertyProps> = (props) => {
+  const { onChange, record } = props
+
+  const handleClick = (): void => {
+    onChange({
+      ...record,
+      params: {
+        ...record.params,
+        name: 'my new name',
+      },
+    })
+  }
+
+  return (
+    <Box mb="xxl">
+      <Button data-testid="name-button" type="button" onClick={handleClick}>Set Name</Button>
+    </Box>
+  )
+}
+
+export default ValueTrigger

src/constants.ts

@@ -1,4 +1,4 @@
-export const DOCS = 'https://softwarebrothers.github.io/admin-bro-dev'
+export const DOCS = 'https://adminbro.com'
 export const DEFAULT_PATHS = {
   rootPath: '/admin',
   logoutPath: '/admin/logout',

src/frontend/components/property-type/default-type/edit.tsx

@@ -6,7 +6,6 @@ import { Input, FormMessage, FormGroup, Label, selectStyles } from '@admin-bro/d
 
 import { EditPropertyProps } from '../base-property-props'
 import { recordPropertyIsEqual } from '../record-property-is-equal'
-import usePrevious from '../../../utils/usePrevious'
 
 type CombinedProps = EditPropertyProps & {theme: DefaultTheme}
 
@@ -52,13 +51,11 @@ const TextEdit: FC<CombinedProps> = (props) => {
   const propValue = record.params?.[property.name] ?? ''
   const [value, setValue] = useState(propValue)
 
-  const previous = usePrevious(propValue)
   useEffect(() => {
-    // this means props updated
-    if (propValue !== previous) {
+    if (value !== propValue) {
       setValue(propValue)
     }
-  }, [])
+  }, [propValue])
 
   return (
     <Input

src/frontend/components/property-type/password/edit.tsx

@@ -4,7 +4,6 @@ import { Label, Input, FormGroup, InputGroup, FormMessage, Button, Icon } from '
 
 import { EditPropertyProps } from '../base-property-props'
 import { recordPropertyIsEqual } from '../record-property-is-equal'
-import usePrevious from '../../../utils/usePrevious'
 
 const Edit: React.FC<EditPropertyProps> = (props) => {
   const { property, record, onChange } = props
@@ -13,13 +12,11 @@ const Edit: React.FC<EditPropertyProps> = (props) => {
   const error = record.errors && record.errors[property.name]
   const [isInput, setIsInput] = useState(false)
 
-  const previous = usePrevious(propValue)
   useEffect(() => {
-    // this means props updated
-    if (propValue !== previous) {
+    if (value !== propValue) {
       setValue(propValue)
     }
-  }, [])
+  }, [propValue])
 
   return (
     <FormGroup error={!!error}>

src/frontend/components/property-type/textarea/edit.tsx

@@ -4,21 +4,18 @@ import { Input, Label, FormGroup, FormMessage } from '@admin-bro/design-system'
 
 import { EditPropertyProps } from '../base-property-props'
 import { recordPropertyIsEqual } from '../record-property-is-equal'
-import usePrevious from '../../../utils/usePrevious'
 
 const Edit: FC<EditPropertyProps> = (props) => {
   const { onChange, property, record } = props
   const propValue = record.params?.[property.name] ?? ''
   const [value, setValue] = useState(propValue)
   const error = record.errors?.[property.name]
 
-  const previous = usePrevious(propValue)
   useEffect(() => {
-    // this means props updated
-    if (propValue !== previous) {
+    if (value !== propValue) {
       setValue(propValue)
     }
-  }, [])
+  }, [propValue])
 
   return (
     <FormGroup error={Boolean(error)}>