OwlCyberSecurity - MANAGER

Edit File: Host.js

import {
    SelectControl,
} from '@wordpress/components';
import {useRef} from "@wordpress/element";
import useFields from "./FieldsData";

const Host = (props) => {
    const {updateField, setChangedField, saveFields, handleNextButtonDisabled} = useFields();
    const disabled = useRef(false);

const onChangeHandler = async (fieldValue) => {
        let field = props.field;
        //force update, and get new fields.
        handleNextButtonDisabled(true);
        disabled.current = true;
        updateField(field.id, fieldValue);
        setChangedField(field.id, fieldValue);

await saveFields(true, false);

handleNextButtonDisabled(false);
        disabled.current = false;
    }

return (
          <SelectControl
              label={ field.label }
              onChange={ ( fieldValue ) => onChangeHandler(fieldValue) }
              value= { fieldValue }
              options={ options }
              disabled={disabled.current}
          />
    )
}
export default Host;