[Feature Request] Create a Prop that passes down to the Input component.

[hellb0rg]

They keyword Mod allows me to pass a dict/string that is then translated into a data- variable on the input.
The problem is that the data- variable gets created on the root element rather than the input which means that the data- prop is unusable for a patternmatching callback.

Would be nice if one could add another keyword, something like inputMod, that functions like the Mod keyword but for the actual Input element.

[AnnMarieW]

@hellb0rg
Can you make a minimal example so I understand what you are looking for? I'm not familiar with the Mod keyword.

[hellb0rg]

Lets see, ill try.
Mod allows one to pass something akin to {"validation-key":"123-2243"} which gets translated into data-validation-key="123-2243" on the root element of a input.

I would like a prop that does the same thing, but on the actual Input. If we call the prop inputMod it could look like this:
dmc.TextInput(id="username", inputMod={"validation-key":"username-validation"})

Which would generate the following html code:

<div autocomplete="off">
  <label id="username-label">Username</label>
   <div  data-variant="default">
      <input data-validation-key="username-validation" id="username" value="" >
    </div>
</div>

The idea is that we can create data-XXX variables on the actual input element rather than only the root element.

[AnnMarieW]

Hi @hellb0rg
This is a good suggestion!

It appears that all Mantine components support a mod prop which enables adding data props to the root element:
https://mantine.dev/styles/data-attributes/#mod-prop

Rather than having a specific inputMod prop, it might be better to have an inputWrapperProps that enables passing any valid prop to the Input component. (similar to the wrapperProps that passes props to the root)

it would be better to a have a generic inputWrapper prop so that you can add any props

[BSd3v]

Hello @hellb0rg,

Can you give this a try and see if it works for you?

from dash import *
import dash_mantine_components as dmc

app = Dash(__name__)

app.layout = dmc.MantineProvider([
    dmc.TextInput(inputProps={"data-validation-key":"username-validation"})
])


if __name__ == "__main__":
    app.run(debug=True)

[AnnMarieW]

Thanks for the example @BSd3v!

I ran it and verified that the inputProps are added to the input element.

Note that DMC>=1.2.0 is required.

I think this is OK to close as completed. @hellb0rg if you are still having issues, please feel free to re-open.