Custom component not opening on edit

im using below custom component like using select they t=can select the value and later user can edit it as per their required value. im getting the value saved but again if the used want to edit the query builder is not opening

following is the query => [cwx_testoptionset].[set_values] = 'tes@123'

import React, { useEffect, useState } from "react";

const CustomComponent = (props: any) => {

  const [selectedOption, setSelectedOption] = useState("");
  const [isEditing, setIsEditing] = useState(false);
  const [editedValue, setEditedValue] = useState("");

  useEffect(() => {

    if (props.value) {
      props.setEditedValueQueryBuilder(props.value);
      setSelectedOption(props.value);
    }
  }, []);

  const handleSelectChange = (event: any) => {
    debugger;
    setSelectedOption(event.target.value);
    setEditedValue(
      props.listValues?.find((el: any) => el?.value === event.target.value)
        ?.title
    );
    props.setValue(event.target.value);
    props.setEditedValueQueryBuilder(event.target.value);
    setIsEditing(true);
  };

  const handleInputChange = (event: any) => {
    setEditedValue(event.target.value);
    debugger;
    props.setValue(event.target.value);
    props.setEditedValueQueryBuilder(event.target.value);
  };

  const handleBlur = () => {
    setIsEditing(false);
    //setSelectedOption(editedValue);
  };

  return (
    <div>
      {isEditing ? (
        <input
          type="text"
          value={editedValue}
          onChange={handleInputChange}
          onBlur={handleBlur}
          autoFocus
        />
      ) : (
        <div>
          our custom
          <select value={selectedOption} onChange={handleSelectChange}>
            <option value="" disabled>
              Select an option
            </option>
            {props.listValues.map(({ value, title }: any) => (
              <option value={value}>{title}</option>
            ))}
          </select>
        </div>
      )}
    </div>
  );
};

export default CustomComponent;

ukrbublik / react-awesome-query-builder

Custom component not opening on edit #1080