Method inputsChanged

core/src/components/alert/alert.tsx:318–360

()

  @Watch('inputs')
  inputsChanged() {
    const inputs = this.inputs;

    // Get the first input that is not disabled and the checked one
    // If an enabled checked input exists, set it to be the focusable input
    // otherwise we default to focus the first input
    // This will only be used when the input is type radio
    const first = inputs.find((input) => !input.disabled);
    const checked = inputs.find((input) => input.checked && !input.disabled);
    const focusable = checked || first;

    // An alert can be created with several different inputs. Radios,
    // checkboxes and inputs are all accepted, but they cannot be mixed.
    const inputTypes = new Set(inputs.map((i) => i.type));
    if (inputTypes.has('checkbox') && inputTypes.has('radio')) {
      printIonWarning(
        `[ion-alert] - Alert cannot mix input types: ${Array.from(inputTypes.values()).join(
          '/'
        )}. Please see alert docs for more info.`
      );
    }

    this.inputType = inputTypes.values().next().value;
    this.processedInputs = inputs.map(
      (i, index) =>
        ({
          type: i.type || 'text',
          name: i.name || `${index}`,
          placeholder: i.placeholder || '',
          value: i.value,
          label: i.label,
          checked: !!i.checked,
          disabled: !!i.disabled,
          id: i.id || `alert-input-${this.overlayIndex}-${index}`,
          handler: i.handler,
          min: i.min,
          max: i.max,
          cssClass: i.cssClass ?? '',
          attributes: i.attributes || {},
          tabindex: i.type === 'radio' && i !== focusable ? -1 : 0,
        } as AlertInput)
    );
  }

  connectedCallback() {
    prepareOverlay(this.el);