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

Code before:
    input: string
  ) => {
    if (input.length === 0) {
      return;
    }

    const inputArray = input.split('');
    const hourValue = inputArray.slice(0, 2).join('');
    const foundHour = this.searchColumn(firstColumn, hourValue);

    if (inputArray.length > 2 && foundHour) {
      const minuteValue = inputArray.slice(2, 4).join('');
      this.searchColumn(secondColumn, minuteValue);
    } else if (!foundHour && inputArray.length >= 1) {
      let singleDigitHour = inputArray[0];
      let singleDigitFound = this.searchColumn(firstColumn, singleDigitHour);
      if (!singleDigitFound) {
        inputArray.shift();
        singleDigitHour = inputArray[0];
        singleDigitFound = this.searchColumn(firstColumn, singleDigitHour);
      }

      if (singleDigitFound && inputArray.length > 1) {
        const remainingDigits = inputArray.slice(1, 3).join('');
        this.searchColumn(secondColumn, remainingDigits);
      }
    }
  };

  private selectMultiColumn = () => {
    const { inputEl, el } = this;
    if (!inputEl) {
      return;
    }

    const numericPickers = Array.from(el.querySelectorAll('ion-picker-column')).filter((col) => col.numericInput);

    const firstColumn = numericPickers[0];
    const lastColumn = numericPickers[1];

    let value = inputEl.value;
    if (value.length > 4) {
      const startIndex = inputEl.value.length - 4;
      const newString = inputEl.value.substring(startIndex);

      inputEl.value = newString;
      value = newString;
    }

    this.multiColumnSearch(firstColumn, lastColumn, value);
  };

Review comment (bug):
It would be great to have comments explaining what the if statements are doing to speed up the debugging/review process for devs.

Code after:
    input: string
  ) => {
    if (input.length === 0) {
      return;
    }

    const inputArray = input.split('');
    const hourValue = inputArray.slice(0, 2).join('');
    // Try to find a match for the first two digits in the first column
    const foundHour = this.searchColumn(firstColumn, hourValue);

    // If we have more than 2 digits and found a match for hours,
    // use the remaining digits for the second column (minutes)
    if (inputArray.length > 2 && foundHour) {
      const minuteValue = inputArray.slice(2, 4).join('');
      this.searchColumn(secondColumn, minuteValue);
    }
    // If we couldn't find a match for the two-digit hour, try single digit approaches
    else if (!foundHour && inputArray.length >= 1) {
      // First try the first digit as a single-digit hour
      let singleDigitHour = inputArray[0];
      let singleDigitFound = this.searchColumn(firstColumn, singleDigitHour);

      // If that didn't work, try the second digit as a single-digit hour
      // (handles case where user made a typo in the first digit, or they typed over themselves)
      if (!singleDigitFound) {
        inputArray.shift();
        singleDigitHour = inputArray[0];
        singleDigitFound = this.searchColumn(firstColumn, singleDigitHour);
      }

      // If we found a single-digit hour and have remaining digits,
      // use up to 2 of the remaining digits for the second column
      if (singleDigitFound && inputArray.length > 1) {
        const remainingDigits = inputArray.slice(1, 3).join('');
        this.searchColumn(secondColumn, remainingDigits);
      }
    }
  };

  private selectMultiColumn = () => {
    const { inputEl, el } = this;
    if (!inputEl) {
      return;
    }

    const numericPickers = Array.from(el.querySelectorAll('ion-picker-column')).filter((col) => col.numericInput);

    const firstColumn = numericPickers[0];
    const lastColumn = numericPickers[1];