Dynamic Select Entity

[briggs-milburn]

Hi, love the package - I am trying to add a "Select" attribute that doesn't add fields until an "Add Item" button is clicked inside of the attribute dropdown, it would look something like this:

Where the Highlighted add button adds the text in the text field to the list.

Here is the code I have:
selectEntity:

export const selectEntity = createEntity({
    name: "select",
    attributes: [labelAttribute, requiredAttribute, placeholderAttribute, isVisibleToFiAttribute, helpTextAttribute, optionsAttribute],
    validate(value) {
        return z.string().optional().parse(value);
    },
});

export const SelectComponent = createEntityComponent(
    selectEntity,
    (props) => {
        return (
            <div>
                <Select
                    id={props.entity.id}
                    label={props.entity.attributes.label}
                    placeholder={props.entity.attributes.placeholder}
                    originalValue={props.entity.value ?? ""}
                    onChange={(id,value) => props.setValue(value)}
                    optional={!props.entity.attributes.required}
                    options={props.entity.attributes.options}
                />
                {props.entity.error instanceof ZodError
                    ? props.entity.error.format()._errors[0]
                    : null}
            </div>
        );
    },

OptionsAttribute:

export const optionsAttribute = createAttribute({
  name: "options",
  validate(value) {
    return z.array().optional().parse(value)
  },
});

export const OptionsAttributeComponent = createAttributeComponent(
  optionsAttribute,
  (props) => {
    const defItems = props.attribute.value ? props.attribute.value : []
    const [items, setItems] = useState([...defItems])
    const [text, setText] = useState("")
    const id = `${props.entity.id}-${props.attribute.name}`;
    

    const addNewItem = () => {
      props.setValue([...items, text])
      setText("")
    }

    const handleChange = (id, val) => val && setText(val)

    const transformValToHtml = () => {
      return defItems.map((item) => {
        return <div slot="header">{item}</div>
      })
    }


    useEffect(() => {
      setItems([...transformValToHtml(),<div slot="header">
        <TextField onChange={handleChange} rightButton={{ iconType: 'add', onClick: addNewItem }} />
      </div>])
    }, [])

    return (
      <div>
        <List
          id={id}
          name={id}
          label={"Select Options"}
          items={items}
        />
        {
          props.attribute.error instanceof ZodError
            ? props.attribute.error.format()._errors[0]
            : null
        }
      </div>
    );
  },
);

I am having an issue where the text is being cleared out prior to adding the new item to the value array. Is there a way to accomplish this in your current setup? It seems to be reloading the state on click

[briggs-milburn]

I see the select example here https://github.com/coltorapps/builder/blob/main/docs/src/builders/basic-form-builder/entities/select-field/component.tsx so thank you for the great documentation!

[sandulat]

Sorry for the delayed response, @briggs-milburn. I'm glad you got it figured out!