Fix disabled trailing icon remains disabled until input field changes

[vicgeralds]

Makes sure the mdc textfield disabled state is updated correctly. This required changing how the invalid icon is rendered as well.

Rendering an input field as disabled with a trailing icon and later setting disabled={false} did not work for some reason. When initializing MDCTextField, it will disable the trailing icon by setting tabindex="-1" which makes it unclickable. The problem can be seen here:

https://github.com/Lundalogik/lime-elements/assets/5563232/fd3efad7-2c38-49d8-b9a1-55796f756cd0

It is possible to reproduce by changing the date picker composite example, adding disabled: true to the initial state props and removing key={`updateOnFormChange-${this.key}`} when rendering <limel-date-picker>.

When updating the disabled state, the initial invalid state of the input field also matters. Since MDCTextField expects the trailing icon to be a button that should be clickable when the input field is not disabled, rendering the invalid icon with class mdc-text-field__icon--trailing causes unwanted behaviour. If the input field is initially invalid, the saved tabstate for the trailing icon will be -1, and it will stay unclickable when enabling the input field.

Review:

• [ ] Commits are atomic
• [ ] Commits have the correct type for the changes made
• [ ] Commits with breaking changes are marked as such

Browsers tested:

(Check any that applies, it's ok to leave boxes unchecked if testing something didn't seem relevant.)

Windows:

• [ ] Chrome
• [ ] Edge
• [ ] Firefox

Linux:

• [ ] Chrome
• [ ] Firefox

macOS:

• [ ] Chrome
• [ ] Firefox
• [ ] Safari

Mobile:

• [ ] Chrome on Android
• [ ] iOS

[github-actions[bot]]

Documentation has been published to https://lundalogik.github.io/lime-elements/versions/PR-2973/

[lime-opensource]

:tada: This PR is included in version 37.33.1 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: