Date Input supports typing characters and deleting selected date

[MirelaPaun]

Describe the bug Date Input supports typing characters and deleting selected date by pressing DELETE or BACKSPACE keys from the keyboard

To reproduce

• Display an input type date

  <form data-ts="Form">
  <fieldset>
      <label>
          <span>Date</span>
          <input type="date"
              value="2015-01-01"
              min="2014-01-01"
              max="2016-01-01"/>
      </label>
  </fieldset>
  </form>

• select a date

• with focus on that input, try to type a character or to delete the selected date

• the issue can be reproduced here too: http://ui.tradeshift.com/v12/#components/forms/

Expected behavior Date Input shouldn't be manipulated, once a date is selected, the input should be readonly.

Framework usage React 16.8.6 TS UI Comp 12.3.6

Desktop (please complete the following information):

• Browser: Chrome

Additional context Add any other context about the problem here.

[apasare]

The reason why this is happening is because when you click on a label the focus is provided to the label's first visible child input element. In this case the first visible element is the original input, which is pseudo-hidden(width: 0; height: 0) - you can check this by typing document.activeElement into console.

One quick solution on your side, until this is fixed in ts-ui, would be to add the following css rule to properly hide the element:

.ts-form .ts-dateinput {
    display: none;
}

[MirelaPaun]

@lauratanase please check this issue too. It seems that other teams are also having issues with input type date. Thank you