Start-/EndAdornments for Input fields (React Material)

packages/examples/src/examples/adornments.ts

@@ -0,0 +1,136 @@
+/*
+  The MIT License
+
+  Copyright (c) 2017-2026 EclipseSource Munich
+  https://github.com/eclipsesource/jsonforms
+
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+  THE SOFTWARE.
+*/
+import { registerExamples } from '../register';
+
+export const schema = {
+  type: 'object',
+  properties: {
+    price: {
+      type: 'number',
+    },
+    weight: {
+      type: 'number',
+    },
+    quantity: {
+      type: 'integer',
+    },
+    website: {
+      type: 'string',
+    },
+    username: {
+      type: 'string',
+    },
+    voltage: {
+      type: 'string',
+      enum: ['110', '230', '400'],
+    },
+    frequency: {
+      type: 'string',
+      oneOf: [
+        { const: '50', title: '50' },
+        { const: '60', title: '60' },
+      ],
+    },
+  },
+};
+
+export const uischema = {
+  type: 'VerticalLayout',
+  elements: [
+    {
+      type: 'HorizontalLayout',
+      elements: [
+        {
+          type: 'Control',
+          scope: '#/properties/price',
+          options: { startAdornment: '€' },
+        },
+        {
+          type: 'Control',
+          scope: '#/properties/weight',
+          options: { endAdornment: 'kg' },
+        },
+        {
+          type: 'Control',
+          scope: '#/properties/quantity',
+          options: { endAdornment: 'pcs' },
+        },
+      ],
+    },
+    {
+      type: 'HorizontalLayout',
+      elements: [
+        {
+          type: 'Control',
+          scope: '#/properties/website',
+          options: { startAdornment: 'https://' },
+        },
+        {
+          type: 'Control',
+          scope: '#/properties/username',
+          options: { startAdornment: '@', endAdornment: '.example.com' },
+        },
+      ],
+    },
+    {
+      type: 'HorizontalLayout',
+      elements: [
+        {
+          type: 'Control',
+          scope: '#/properties/voltage',
+          label: 'Voltage (autocomplete)',
+          options: { endAdornment: 'V' },
+        },
+        {
+          type: 'Control',
+          scope: '#/properties/voltage',
+          label: 'Voltage (select)',
+          options: { autocomplete: false, endAdornment: 'V' },
+        },
+        {
+          type: 'Control',
+          scope: '#/properties/frequency',
+          options: { autocomplete: false, endAdornment: 'Hz' },
+        },
+      ],
+    },
+  ],
+};
+
+export const data = {
+  weight: 12.5,
+  username: 'jane',
+  voltage: '230',
+};
+
+registerExamples([
+  {
+    name: 'adornments',
+    label: 'Adornments',
+    data,
+    schema,
+    uischema,
+  },
+]);

packages/examples/src/index.ts

@@ -26,6 +26,7 @@ import * as issue_1884 from './examples/1884';
 import * as issue_1948 from './examples/1948';
 import * as additionalErrors from './examples/additional-errors';
 import * as additionalProperties from './examples/additional-properties';
+import * as adornments from './examples/adornments';
 import * as allOf from './examples/allOf';
 import * as anyOf from './examples/anyOf';
 import * as anyOfOneOfAllOfResolve from './examples/anyOf-oneOf-allOf-resolve';
@@ -92,6 +93,7 @@ import * as jsonschema from './examples/jsonschema';
 export {
   additionalErrors,
   additionalProperties,
+  adornments,
   allOf,
   anyOf,
   anyOfOneOfAllOfResolve,

packages/material-renderers/src/controls/MaterialAnyOfStringOrEnumControl.tsx

@@ -40,6 +40,7 @@ import merge from 'lodash/merge';
 import React, { useMemo } from 'react';
 import {
   useDebouncedChange,
+  useInputAdornments,
   useInputComponent,
   WithInputProps,
   useFocus,
@@ -78,6 +79,9 @@ const MuiAutocompleteInputText = (
     () => merge({}, config, uischema.options),
     [config, uischema.options]
   );
+  const { endAdornment, ...adornmentProps } = useInputAdornments(
+    appliedUiSchemaOptions
+  );
   const inputProps: InputBaseComponentProps = useMemo(() => {
     let propMemo: InputBaseComponentProps = {};
     if (appliedUiSchemaOptions.restrict) {
@@ -122,7 +126,13 @@ const MuiAutocompleteInputText = (
       fullWidth={!appliedUiSchemaOptions.trim || maxLength === undefined}
       inputProps={inputProps}
       error={!isValid}
-      endAdornment={dataList}
+      {...adornmentProps}
+      endAdornment={
+        <>
+          {dataList}
+          {endAdornment}
+        </>
+      }
     />
   );
 };

packages/material-renderers/src/mui-controls/MuiAutocomplete.tsx

@@ -39,6 +39,7 @@ import FormHelperText from '@mui/material/FormHelperText';
 import TextField from '@mui/material/TextField';
 import merge from 'lodash/merge';
 import { useFocus } from '../util/focus';
+import { useInputAdornments } from '../util/adornment';
 
 export interface WithOptionLabel {
   getOptionLabel?(option: EnumOption): string;
@@ -79,6 +80,9 @@ export const MuiAutocomplete = (
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
   const [inputValue, setInputValue] = React.useState(data ?? '');
   const [focused, onFocus, onBlur] = useFocus();
+  const { startAdornment, endAdornment } = useInputAdornments(
+    appliedUiSchemaOptions
+  );
 
   const findOption = options.find((o) => o.value === data) ?? null;
 
@@ -133,6 +137,17 @@ export const MuiAutocomplete = (
             fullWidth={!appliedUiSchemaOptions.trim}
             slotProps={{
               ...params.slotProps,
+              input: {
+                ...params.slotProps.input,
+                startAdornment:
+                  startAdornment ?? params.slotProps.input.startAdornment,
+                endAdornment: (
+                  <>
+                    {endAdornment}
+                    {params.slotProps.input.endAdornment}
+                  </>
+                ),
+              },
               inputLabel: {
                 ...params.slotProps.inputLabel,
                 ...(data ? { shrink: true } : undefined),

packages/material-renderers/src/mui-controls/MuiInputInteger.tsx

@@ -27,6 +27,7 @@ import { CellProps, WithClassname } from '@jsonforms/core';
 import merge from 'lodash/merge';
 import {
   useDebouncedChange,
+  useInputAdornments,
   useInputComponent,
   WithInputProps,
   useFocus,
@@ -56,6 +57,7 @@ export const MuiInputInteger = React.memo(function MuiInputInteger(
   const inputProps = { step: '1' };
 
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
+  const adornmentProps = useInputAdornments(appliedUiSchemaOptions);
 
   const [inputValue, onChange] = useDebouncedChange(
     handleChange,
@@ -83,6 +85,7 @@ export const MuiInputInteger = React.memo(function MuiInputInteger(
       inputProps={inputProps}
       fullWidth={true}
       error={!isValid}
+      {...adornmentProps}
     />
   );
 });

packages/material-renderers/src/mui-controls/MuiInputNumber.tsx

@@ -27,6 +27,7 @@ import { CellProps, WithClassname } from '@jsonforms/core';
 import merge from 'lodash/merge';
 import {
   useDebouncedChange,
+  useInputAdornments,
   useInputComponent,
   WithInputProps,
   useFocus,
@@ -55,6 +56,7 @@ export const MuiInputNumber = React.memo(function MuiInputNumber(
   const inputProps = { step: '0.1' };
 
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
+  const adornmentProps = useInputAdornments(appliedUiSchemaOptions);
   const [inputValue, onChange] = useDebouncedChange(
     handleChange,
     '',
@@ -81,6 +83,7 @@ export const MuiInputNumber = React.memo(function MuiInputNumber(
       inputProps={inputProps}
       fullWidth={true}
       error={!isValid}
+      {...adornmentProps}
     />
   );
 });

packages/material-renderers/src/mui-controls/MuiInputNumberFormat.tsx

@@ -27,6 +27,7 @@ import { CellProps, Formatted, WithClassname } from '@jsonforms/core';
 import merge from 'lodash/merge';
 import {
   useDebouncedChange,
+  useInputAdornments,
   useInputComponent,
   WithInputProps,
   useFocus,
@@ -51,6 +52,7 @@ export const MuiInputNumberFormat = React.memo(function MuiInputNumberFormat(
   const InputComponent = useInputComponent();
   const maxLength = schema.maxLength;
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
+  const adornmentProps = useInputAdornments(appliedUiSchemaOptions);
   let inputProps;
   if (appliedUiSchemaOptions.restrict) {
     inputProps = { maxLength: maxLength };
@@ -90,6 +92,7 @@ export const MuiInputNumberFormat = React.memo(function MuiInputNumberFormat(
       fullWidth={!appliedUiSchemaOptions.trim || maxLength === undefined}
       inputProps={inputProps}
       error={!isValid}
+      {...adornmentProps}
     />
   );
 });

packages/material-renderers/src/mui-controls/MuiInputText.tsx

@@ -35,6 +35,7 @@ import {
   JsonFormsTheme,
   WithInputProps,
   useDebouncedChange,
+  useInputAdornments,
   useInputComponent,
   useFocus,
 } from '../util';
@@ -97,6 +98,9 @@ export const MuiInputText = React.memo(function MuiInputText(
   const onPointerLeave = () => setShowAdornment(false);
 
   const theme: JsonFormsTheme = useTheme();
+  const { endAdornment, ...adornmentProps } = useInputAdornments(
+    appliedUiSchemaOptions
+  );
 
   const closeStyle = {
     background:
@@ -105,6 +109,19 @@ export const MuiInputText = React.memo(function MuiInputText(
     borderRadius: '50%',
   };
 
+  const isClearable = showAdornment && enabled && data !== undefined;
+  // With an end adornment, the clear button stays in the layout so it never covers the adornment
+  const clearButtonStyle: React.CSSProperties = endAdornment
+    ? {
+        display: enabled ? 'flex' : 'none',
+        visibility: isClearable ? 'visible' : 'hidden',
+      }
+    : {
+        display: isClearable ? 'flex' : 'none',
+        position: 'absolute',
+        right: 0,
+      };
+
   return (
     <InputComponent
       label={label}
@@ -123,26 +140,20 @@ export const MuiInputText = React.memo(function MuiInputText(
       error={!isValid}
       onPointerEnter={onPointerEnter}
       onPointerLeave={onPointerLeave}
+      {...adornmentProps}
       endAdornment={
-        <InputAdornment
-          position='end'
-          style={{
-            display:
-              !showAdornment || !enabled || data === undefined
-                ? 'none'
-                : 'flex',
-            position: 'absolute',
-            right: 0,
-          }}
-        >
-          <IconButton
-            aria-label='Clear input field'
-            onClick={onClear}
-            size='large'
-          >
-            <Close style={closeStyle} />
-          </IconButton>
-        </InputAdornment>
+        <>
+          <InputAdornment position='end' style={clearButtonStyle}>
+            <IconButton
+              aria-label='Clear input field'
+              onClick={onClear}
+              size='large'
+            >
+              <Close style={closeStyle} />
+            </IconButton>
+          </InputAdornment>
+          {endAdornment}
+        </>
       }
       inputComponent={inputComponent}
     />