Input: Add autocapitalize, autocorrect, enterkeyhint, and spellcheck properties

[austinoneil]

Description

Add autocapitalize, autocorrect, enterkeyhint, and spellcheck properties to input

References #2347

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update

How Has This Been Tested?

Added unit tests

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules
• I have checked my code and corrected any misspellings

[netlify]

✅ Deploy Preview for moduswebcomponents ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	1a1de52
🔍 Latest deploy log	https://app.netlify.com/sites/moduswebcomponents/deploys/660bc196d8c50d00081fecb4
😎 Deploy Preview	https://deploy-preview-2351--moduswebcomponents.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 26 (🔴 down 1 from production) Accessibility: 98 (no change from production) Best Practices: 92 (no change from production) SEO: 92 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[coliff]

Nice! looks good.. but we need to have the additional controls to the demo canvas:
https://deploy-preview-2351--moduswebcomponents.netlify.app/?path=/story/user-inputs-text-input--default
(autocapitalize, autocorrect, enterkeyhint, and spellcheck options should be available here)

I don't think we need demos of them on the Docs page, can you please remove?

[austinoneil]

@coliff done.

[coliff]

• autocapitalize is appearing twice
• spellcheck is missing
• changing the values of the autocapitalize, autocorrect and enterkeyhint does not change the input at all. See screenshot:
  
  We expect the input with id="mwc_id_0_text_input" here to have enterkeyhint="done" autocapitalize="sentences" autocorrect="off"

[austinoneil]

Oops. Fixed.

[coliff]

thanks for work on this so far - still a few more things:

• autocapitalize by default should not be set at all. autocapitalize attribute should not be set on the mwc_id_9_text_input in the canvas example. (autocapitalize is the default on mobile devices usually anyway). So the dropdown in the Controls as standard should be 'Choose option...'
• autocorrect by default should not be set at all. autocorrect attribute should not be set on the mwc_id_9_text_input in the canvas example. (autocorrect is the default on mobile devices usually anyway). So the dropdown in the Controls as standard should be 'Choose option...'
• enterkeyhint should not have an option pre-selected - so have a ('Choose option...') selected.
• spellcheck should be a dropdown with true or false options - but by default nothing selected ('Choose option...').

[austinoneil]

I made the changes (except for spellcheck, as that is an attribute that is true if it's included, much like disabled).

[kuhnboy]

@austinoneil Why make autocorrect: boolean | 'off' | 'on';

Why not stick to just an enumeration or just a boolean?

[austinoneil]

@kuhnboy When I as a developer see autocorrect as an attribute, my instinct tells me that it is a boolean input; however, the autocorrect attribute on input takes "on" and "off" as values. I included both because doing so makes the library easier to use without creating any obvious problems.

[austinoneil]

@kuhnboy That said, it does look like this was causing issues with autocapitalize in react (see #2412), so if needed, we can just use "on" and "off" (or just boolean)