I want to listen to the duplicate event of the component. Is there a way to achieve that?

[tuthanhoancanh012]

I want to listen to the duplicate event of the component. Is there a way to achieve that?

[sergeythrees]

Hi, @tuthanhoancanh012
At the moment, this is only possible through the use of Formengine source code. Could you tell us more about what you need it for?

[tuthanhoancanh012]

Hi @sergeythrees ,
Yes, we need to use them in the source code. I need to listen for the duplicate event in my custom component. For example, when I use the duplicate Input component, which already has a value entered, it does not retain the value I previously input when duplicated

const MyInput = (props: MyTitleProps) => {
  return (
    <Input
      className={`z-10 ${props.className}`}
      value={props.value}
      onChange={(event) => {
        props?.onChange?.(event.target.value);
      }}
    />
  );
};

export const Input= define(MyInput, 'input')
  .name('Input Fields')
  .category('fields')
  .props({
    value: string.valued.default(''),
  })
  .css({
    textAlign: oneOf('left', 'center', 'right').radio().default('left'),
  })
  .icon(() => <InputIcon />);

[sergeythrees]

@tuthanhoancanh012

The cloning function is designed to create a copy along with all the entered properties. Otherwise, the user can simply add/drag a clean component from the component list. What are you missing in this solution?
Or do you mean that you want all other entered settings to be cloned, excluding only value?

[tuthanhoancanh012]

@sergeythrees ,
I encountered an issue when using the duplicate function with my custom input. I enter a value and then duplicate the component, but the duplicated component only clones the structure. I want it to include the value I entered previously. If possible, please show me how to listen for the duplicate event and let me know which key field is being duplicated so that I can update my schema and data accordingly
https://github.com/user-attachments/assets/801e18f8-1bfd-480b-bf8d-707826d79e8d

[sergeythrees]

Hi @tuthanhoancanh012
here is an example of how this can be implemented:

import {useBuilderContext, useComponentData} from '@react-form-builder/core'
import {useCallback} from 'react'

const MyInput = (props: any) => {
  const {builderMode} = useBuilderContext()
  const {store} = useComponentData()
  const handleChange = useCallback((event: any) => {
    if (builderMode === 'builder') {
      store.props.value ??= {}
      store.props.value.value = event.target.value
      return
    }
    props?.onChange?.(event.target.value)
  }, [builderMode, props, store])
  return (
    <Input
      className={`z-10 ${props.className}`}
      value={props.value}
      onChange={handleChange}
    />
  );
};

[tuthanhoancanh012]

@sergeythrees , Great answer. Thank you so much.