Fix 4707 - Fixed additional properties for daisyui theme (rjsf-team#4722)

Fixes rjsf-team#4707 by rendering the `WrapIfAdditionalTemplate` inside of the `FieldTemplate`
- Updated the `WrapIfAdditionalTemplate` to properly render the delete button and key input around the `children` when the schema element is an additional property
- Updated the `FieldTemplate` to properly wrap the Field with the `WrapIfAdditionalTemplate`
- Updated the snapshots accordingly
- Updated the `CHANGELOG.md` accordingly

Author: heath-freenome

CHANGELOG.md

@@ -32,6 +32,7 @@ should change the heading of the (upcoming) version to include a major version b
 ## @rjsf/daisyui
 
 - Fixed checkbox widget to use current value instead of event target in onFocus/onBlur handlers, fixing [#4704](https://github.com/rjsf-team/react-jsonschema-form/issues/4704)
+- Fixed additional properties rendering by properly connecting the `FieldTemplate` and `WrapIfAdditionalTemplate`, fixing [4707](https://github.com/rjsf-team/react-jsonschema-form/issues/4707)
 - Fixed the missing hook dependencies in the `DateTimeWidget` and `DateWidget` so that they work properly
 
 ## @rjsf/fluentui-rc

packages/daisyui/src/templates/FieldTemplate/FieldTemplate.tsx

@@ -1,4 +1,11 @@
-import { FieldTemplateProps, StrictRJSFSchema, RJSFSchema, FormContextType } from '@rjsf/utils';
+import {
+  FieldTemplateProps,
+  StrictRJSFSchema,
+  RJSFSchema,
+  FormContextType,
+  getTemplate,
+  getUiOptions,
+} from '@rjsf/utils';
 
 /** The `FieldTemplate` component provides the main layout for each form field
  * with DaisyUI styling. It handles:
@@ -47,20 +54,40 @@ export default function FieldTemplate<
 
   // Special handling for checkboxes - they should have the label after the input
   const isCheckbox = schema.type === 'boolean';
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  const WrapIfAdditionalTemplate = getTemplate<'WrapIfAdditionalTemplate', T, S, F>(
+    'WrapIfAdditionalTemplate',
+    registry,
+    uiOptions,
+  );
 
   return (
-    <div className={`field-template mb-3 ${classNames || ''}`} {...divProps}>
-      {displayLabel && !isCheckbox && (
-        <label htmlFor={id} className='label'>
-          <span className='label-text font-medium'>
-            {label}
-            {required && <span className='text-error ml-1'>*</span>}
-          </span>
-        </label>
-      )}
-      {children}
-      {errors}
-      {help}
-    </div>
+    <WrapIfAdditionalTemplate
+      classNames={classNames}
+      disabled={divProps.disabled}
+      id={id}
+      label={label}
+      onDropPropertyClick={onDropPropertyClick}
+      onKeyChange={onKeyChange}
+      readonly={readonly}
+      required={required}
+      schema={schema}
+      uiSchema={uiSchema}
+      registry={registry}
+    >
+      <div className={`field-template mb-3 ${classNames || ''}`} {...divProps}>
+        {displayLabel && !isCheckbox && (
+          <label htmlFor={id} className='label'>
+            <span className='label-text font-medium'>
+              {label}
+              {required && <span className='text-error ml-1'>*</span>}
+            </span>
+          </label>
+        )}
+        {children}
+        {errors}
+        {help}
+      </div>
+    </WrapIfAdditionalTemplate>
   );
 }

packages/daisyui/src/templates/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx

@@ -4,8 +4,9 @@ import {
   StrictRJSFSchema,
   RJSFSchema,
   FormContextType,
-  TranslatableString,
   buttonId,
+  ADDITIONAL_PROPERTY_FLAG,
+  TranslatableString,
 } from '@rjsf/utils';
 
 /** The `WrapIfAdditional` component is used by the `FieldTemplate` to rename, or remove properties that are
@@ -27,13 +28,18 @@ export default function WrapIfAdditionalTemplate<
     readonly,
     required,
     schema,
+    uiSchema,
     onKeyChange,
     onDropPropertyClick,
     registry,
     ...rest
   } = props;
 
-  const { translateString } = registry;
+  const additional = ADDITIONAL_PROPERTY_FLAG in schema;
+  const { templates, translateString } = registry;
+  // Button templates are not overridden in the uiSchema
+  const { RemoveButton } = templates.ButtonTemplates;
+  const keyLabel = translateString(TranslatableString.KeyLabel, [label]);
 
   const handleBlur = useCallback(
     (event: React.FocusEvent<HTMLInputElement>) => {
@@ -46,29 +52,38 @@ export default function WrapIfAdditionalTemplate<
     onDropPropertyClick(label)();
   }, [onDropPropertyClick, label]);
 
+  if (!additional) {
+    return <div className={classNames}>{children}</div>;
+  }
+
   return (
     <div className={`wrap-if-additional-template ${classNames}`} {...rest}>
-      <div className='flex items-center'>
-        <input
-          type='text'
-          className='input input-bordered'
-          id={`${id}-key`}
-          onBlur={handleBlur}
-          defaultValue={label}
-          disabled={disabled || readonly}
-        />
-        {schema.additionalProperties && (
-          <button
+      <div className='flex items-baseline' style={{ justifyContent: 'space-between' }}>
+        <div>
+          <label htmlFor={`${id}-key`} className='label'>
+            <span className='label-text'>{keyLabel}</span>
+          </label>
+          <input
+            type='text'
+            className='input input-bordered'
+            id={`${id}-key`}
+            onBlur={handleBlur}
+            defaultValue={label}
+            disabled={disabled || readonly}
+          />
+        </div>
+        {children}
+        <div className='flex self-center'>
+          <RemoveButton
             id={buttonId<T>(id, 'remove')}
-            className='rjsf-array-item-remove btn btn-danger ml-2'
-            onClick={handleRemove}
+            className='rjsf-object-property-remove'
             disabled={disabled || readonly}
-          >
-            {translateString(TranslatableString.RemoveButton)}
-          </button>
-        )}
+            onClick={handleRemove}
+            uiSchema={uiSchema}
+            registry={registry}
+          />
+        </div>
       </div>
-      {children}
     </div>
   );
 }