Tab on disabled input

Question

I am implementing progressive UI disclosure pattern in my application. Using which I am disabling the next elements. So based on input of one element the next element is enabled

Answer 1

Answer

To answer the question (as we already discussed in the comments), disabled elements can't be focused.

Workaround

For those looking for a workaround that gives a visual indication that an element is "disabled" and also prevents default functionality while still preserving focusability and click events, following is a simplified example where the submit button appears to be disabled and is prevented from "submitting" unless the input contains some text (also restores "disabled" state if input is cleared).

const input = document.querySelector('input');
const button = document.querySelector('button');

input.addEventListener('input', function(event) {
  let next = this.nextElementSibling;
  if (this.value) {
    next.classList.remove('disabled');
  } else {
    next.classList.add('disabled');
  }
});

button.addEventListener('click', function(event) {
  if (this.classList.contains('disabled')) {
    event.preventDefault();
    console.log('not submitted');
  } else {
    console.log('submitted');
  }
});

button {
  background-color: #fff;
  color: #0d47a1;
  border: 2px solid #0d47a1;
}

  button.disabled {
    background-color: #e0e0e0;
    color: #bdbdbd;
    border: 2px solid #bdbdbd;
    cursor: default;
  }
    
    button.disabled:focus {
      outline: none;
    }

Submit