Function FormView

web/pgadmin/static/js/SchemaView/FormView.jsx:62–298

({
  accessPath, schema=null, isNested=false, dataDispatch, className,
  hasSQLTab, getSQLValue, isTabView=true, viewHelperProps, field,
  showError=false, resetKey, focusOnFirstInput=false
})

// The first component of schema view form.
export default function FormView({
  accessPath, schema=null, isNested=false, dataDispatch, className,
  hasSQLTab, getSQLValue, isTabView=true, viewHelperProps, field,
  showError=false, resetKey, focusOnFirstInput=false
}) {
  const [key, setKey] = useState(0);
  const subscriberManager = useSchemaStateSubscriber(setKey);
  const schemaState = useContext(SchemaStateContext);
  const value = useFieldValue(accessPath, schemaState);
  const { visible } = useFieldSchema(
    field, accessPath, value, viewHelperProps, schemaState, subscriberManager
  );

  const [tabValue, setTabValue] = useState(0);
  const formRef = useRef();
  const onScreenTracker = useRef(false);
  let isOnScreen = useOnScreen(formRef);

  if (!schema) schema = field.schema;

  // Set focus on the first focusable element.
  useEffect(() => {
    if (!focusOnFirstInput) return;
    setTimeout(() => {
      const formEle = formRef.current;
      if (!formEle) return;
      const activeTabElement = formEle.querySelector(
        '[data-test="tabpanel"]:not([hidden])'
      );
      if (!activeTabElement) return;

      // Find the first focusable input, which is either:
      // * An editable Input element.
      // * A select element, which is not disabled.
      // * An href element.
      // * Any element with 'tabindex', but - tabindex is not set to '-1'.
      const firstFocussableElement = activeTabElement.querySelector([
        'button:not([role="tab"])',
        '[href]',
        'input:not(disabled)',
        'select:not(disabled)',
        'textarea',
        '[tabindex]:not([tabindex="-1"]):not([data-test="tabpanel"])',
        'div[class="cm-content"]:not([aria-readonly="true"])',
      ].join(', '));

      if (firstFocussableElement) firstFocussableElement.focus();
    }, 200);
  }, [tabValue]);

  useEffect(() => {
    // Refresh on message changes.
    return subscriberManager.current?.add(
      schemaState, ['errors', 'message'], 'states',
      (newState, prevState) => {
        if (_.isUndefined(newState) || _.isUndefined(prevState))
          subscriberManager.current?.signal();
      }