Repository: ionic-team/ionic-framework
File: core/src/components/button/button.tsx (TypeScript)

Code before:
  }

  private handleClick = (ev: Event) => {
    const { el } = this;
    if (this.type === 'button') {
      openURL(this.href, ev, this.routerDirection, this.routerAnimation);
    } else if (hasShadowDom(el)) {
      // this button wants to specifically submit a form
      // climb up the dom to see if we're in a <form>
      // and if so, then use JS to submit it
      let formEl = this.findForm();
      const { form } = this;

      if (!formEl && form !== undefined) {
        /**
         * The developer specified a form selector for
         * the button to submit, but it was not found.
         */
        if (typeof form === 'string') {
          printIonWarning(
            `Form with selector: "#${form}" could not be found. Verify that the selector is correct and the form is rendered in the DOM.`,
            el
          );
        } else {
          printIonWarning(
            `The provided "form" element could not be found. Verify that the form is rendered in the DOM.`,
            el
          );
        }
        return;
      }

      if (!formEl) {
        /**
         * If the form element is not set, the button may be inside
         * of a form element. Query the closest form element to the button.
         */
        formEl = el.closest('form');
      }

      if (formEl) {
        ev.preventDefault();

        const fakeButton = document.createElement('button');
        fakeButton.type = this.type;
        fakeButton.style.display = 'none';
        formEl.appendChild(fakeButton);
        fakeButton.click();
        fakeButton.remove();
      }
    }

Review comment (suggestion):
This warning is a bit confusing because it implies that the form element is not in the DOM at all. However, it could be the case that the element is in the DOM but is not an HTMLFormElement.

Code after:
  }

  private handleClick = (ev: Event) => {
    const { el } = this;
    if (this.type === 'button') {
      openURL(this.href, ev, this.routerDirection, this.routerAnimation);
    } else if (hasShadowDom(el)) {
      // this button wants to specifically submit a form
      // climb up the dom to see if we're in a <form>
      // and if so, then use JS to submit it
      let formEl = this.findForm();
      const { form } = this;

      if (!formEl && form !== undefined) {
        /**
         * The developer specified a form selector for
         * the button to submit, but it was not found.
         */
        if (typeof form === 'string') {
          printIonWarning(
            `Form with selector: "#${form}" could not be found. Verify that the id is correct and the form is rendered in the DOM.`,
            el
          );
        } else {
          printIonWarning(
            `The provided "form" element is invalid. Verify that the form is a HTMLFormElement and rendered in the DOM.`,
            el
          );
        }
        return;
      }

      if (!formEl) {
        /**
         * If the form element is not set, the button may be inside
         * of a form element. Query the closest form element to the button.
         */
        formEl = el.closest('form');
      }

      if (formEl) {
        ev.preventDefault();

        const fakeButton = document.createElement('button');
        fakeButton.type = this.type;
        fakeButton.style.display = 'none';
        formEl.appendChild(fakeButton);
        fakeButton.click();
        fakeButton.remove();
      }
    }