Unable to add an attribute to textbox

[Omzig]

Description of Issue

As a developer, i want to add an attribute to my input element so that i can turn off autocomplete or maybe do something else to the component.

• https://developer.mozilla.org/en-US/docs/Web/Security/Practical_implementation_guides/Turning_off_form_autocompletion#disabling_autocompletion

Assumptions:

• i though the component was a mapped hash table that i could modify or set an element on

    New-UDTypography -Text 'Autocomplete off test'

    New-UDButton -Text 'refresh' -OnClick {
        Sync-UDElement -Id refreshHighlighters
    }
    New-UDPaper -Elevation 5 -Children {
        New-UDForm -Children {
            New-UDTypography -Text 'Add autocomplete(off) via Set-UDElement' -Variant h3
            $item = New-UDTextbox -Label 'Username' -Id 'username' -HelperText autocompleteTest
            $item
            New-UDDynamic -Id refreshHighlighters -Content {
                Set-UDElement -Id "username" -Attributes @{
                    autocomplete = "off"
                }
                $item = Get-UDElement -Id 'username'
                New-UDSyntaxHighlighter -Code ($item | ConvertTo-Json -Depth 3) -Language json
            }
            New-UDTypography -Text 'Add autocomplete(off) via hash table' -Variant h3
            $item2 = New-UDTextbox -Label 'Password' -Id password -HelperText autocompleteTest2
            $item2.autocomplete = 'off'
            $item2
            New-UDSyntaxHighlighter -Code ($item2 | ConvertTo-Json -Depth 3) -Language json
        } -OnSubmit {
            Show-UDToast $eventdata
        }

    }

The resulting html looks like this, it is missing autocomplete="off":

<input aria-invalid="false" aria-describedby="username-helper-text" id="username" placeholder="" type="text" class="MuiInputBase-input MuiInput-input css-1jhxu0" value="">

The hash looks like this:

{
  "isPlugin": true,
  "fullWidth": false,
  "minimum": null,
  "placeholder": "",
  "rows": null,
  "onChange": null,
  "variant": "standard",
  "textType": "text",
  "onValidate": null,
  "onEnter": null,
  "multiline": false,
  "shrink": false,
  "icon": null,
  "mask": "",
  "valid": true,
  "type": "mu-textbox",
  "maximum": null,
  "maxRows": 9999,
  "disabled": false,
  "label": "Username",
  "unmask": false,
  "maxLength": null,
  "autoFocus": false,
  "value": "",
  "assetId": null,
  "className": "",
  "id": "username",
  "onBlur": null,
  "helperText": "autocompleteTest",
  "autocomplete": "off"
}

Version

4.4.1

Severity

Medium

Hosting Method

MSI (Windows Service)

Operating System

Windows

Database

LiteDB

Licensed

Yes

Features

No response

Additional Environment data

No response

Screenshots/Animations

No response

[adamdriscoll]

Same as #3991. Closing that one because this includes more info. The MUI components are more than just a single HTML component at times so adding an attribute on component itself won't work for most things. I will likely need to add a -Attributes parameter and pass it through to the react component properly to get the input tag updated correctly.

[parzog]

As a workaround, I was able to use Invoke-UDJavascript to use JS's setAttribute() function and update the attributes after the DOM is loaded:

Invoke-UDJavascript -JavaScript 'document.getElementById("inputWirelessNumber").setAttribute("type", "tel");'

You should be able to use this as well until the feature is out to manipulate properties like that.