Custom Component Input+Select from Ant D

[junixquiaoit]

I am trying to implement this component from ant design

Does formbuilder able to detect the value of the other field? in this case the select?
When I check the data, it only see the value for the input and not the select.

here is my code for reference.

`'use client';

import React, { useState, useId } from 'react';
import { Input, Flex, Space, Select } from 'antd';
import {
boolean,
define,
oneOf,
string,
number,
event,
array,
} from '@react-form-builder/core';
import { SizeType } from 'antd/lib/config-provider/SizeContext';

interface Option {
label: string | React.ReactNode;
value: string | number;
}

interface CustomCompactInputDropdownProps {
addonAfter?: string;
addonBefore?: string;
disabled?: boolean;
decimalPlaces?: string;
fieldSpaceWidth?: number;
gap?: number,
isRequired?: boolean;
label?: string;
labelFontWeight?: string;
labelSpaceWidth?: number;
layout?: string;
maxLength: number;
optional?: boolean;
onBlur?: (event: React.FocusEvent) => void;
onChange?: (value: string) => void;
onlyNumber?: boolean;
placeholder?: string;
readonly?: boolean;
size?: SizeType;
value?: string;
verticalAlign?: string;
options: Option[];
selectDefaultValue?: string;
}

const CustomCompactInputDropdown: React.FC = ({
addonAfter,
addonBefore,
disabled,
decimalPlaces,
fieldSpaceWidth,
gap,
isRequired = false,
label,
labelFontWeight,
labelSpaceWidth,
layout,
maxLength,
optional = false,
onChange,
onlyNumber,
placeholder,
readonly,
size,
value,
verticalAlign,
onBlur,
options: initialOptions,
selectDefaultValue
}) => {
const [options, setOptions] = useState<Option[]>(initialOptions);
const [error, setError] = useState(false);
const id = useId();

const handleRequiredError = (val: string) => {
if (isRequired) {
setError(!val.trim());
} else {
setError(false);
}
};

return (
<Flex gap={${gap}px} vertical={layout === 'vertical'} align={verticalAlign}>
{label && (
<label
htmlFor={id}
className='custom-input-label'
style={{
width: ${labelSpaceWidth}%,
fontWeight: labelFontWeight,
paddingBottom: layout === 'horizontal' ? undefined : '8px',
lineHeight: layout === 'horizontal' ? '32px' : undefined,
}}
>
{label}{' '}
{isRequired && (
<span style={{ color: error ? '#FF6868' : undefined }}>*
)}
{optional && (
(optional)
)}

)}
<div style={{ width: ${fieldSpaceWidth}% }}>
<Space.Compact>
<Input
id={id}
addonAfter={addonAfter}
addonBefore={addonBefore}
required={true}
disabled={disabled}
maxLength={maxLength}
onChange={(event) => {
const inputValue = event.target.value;
const decimalRegex = new RegExp(
^\\d*\\.?\\d{0,${decimalPlaces}}$
);
const isValidDecimal =
decimalRegex.test(inputValue) || inputValue === '';

          if (!onlyNumber || isValidDecimal) {
            handleRequiredError(inputValue);
            onChange?.(inputValue);
          }
        }}
        placeholder={placeholder ?? ''}
        readOnly={readonly}
        value={value ?? ''}
        size={size}
        onBlur={onBlur}
      />
      {/* Not sure what to do here */}
  <Select id={id+"Dropown"} defaultValue={selectDefaultValue} options={options}/>
</Space.Compact>

  </div>
</Flex>

);
};

export const customCompactInputDropdown = define(CustomCompactInputDropdown, 'CustomCompactInputDropdown')
.name('Compact Input Dropdown')
.props({
layout: oneOf('horizontal', 'vertical').default('horizontal'),
gap: number.named('Gap (px)').default(0),
verticalAlign: oneOf('flex-start', 'center', 'flex-end').default('center'),
addonAfter: string.named('Addon After'),
addonBefore: string.named('Addon Before'),
disabled: boolean,
isRequired: boolean,
label: string.named('Label').default('Custom Input'),
labelFontWeight: oneOf(
'100',
'200',
'300',
'400',
'500',
'600',
'700',
'800',
'900'
).default('400'),
labelSpaceWidth: number.named('Label Width (%)').default(100),
fieldSpaceWidth: number.named('Input Field Width (%)').default(100),
maxLength: number.named('Max Length').default(50),
optional: boolean,
placeholder: string.named('Placeholder'),
readonly: boolean,
size: oneOf('small', 'middle', 'large').default('middle'),
value: string.valued.default(''),
onlyNumber: boolean.named('Only Number').default(false),
decimalPlaces: oneOf('1', '2', '3', '4').default('2'),
onBlur: event,
options: array.named('Options').default([]),
selectDefaultValue: string,
})
.category('Custom Components');
`

[junixquiaoit]

Apologies, was able to find an answer.