i want to use a material ui textfield with InputAd...

# javascript

[thana]

i want to use a material ui textfield with InputAdorments. in the mui docs it is decalred like so

InputProps={{
            startAdornment: <InputAdornment position="start">kg</InputAdornment>,
          }}

How do i do that in kotlinjs? i cant find any implementation of InputBaseComponentProps

[turansky]

i cant find any implementation of InputBaseComponentProps

“implementation”?

[thana]

well its an interface 😄

[thana]

but your reaction tells me: im not looking for an implementation of this interface. so how would i add the adorments then?

[turansky]

InputProps = jso {
    startAdornment = InputAdornment.create { 
        position = "start"
    }
}

[thana]

@turansky
Ah ok this is the way. thank you.
Yet another working but unintuitive way 😉
But... i think there is a bug. i now realize, that the type of the TestFields prop inputProps has the wrong type. InputBaseComponentProps doesnt even have the properties startAdornment or endAdornment although it should have according to the MUI docs. Yet in the same file another Type InputBaseProps which has those properties. Ist this a bug or am i - agian - too stupid to see what is the correct way?

Also: i created a new external interface extending InputBaseComponentProps which in turn declares both fields the same way InputBaseProps does. But this results in an <input> html tag rendered like this: startadornment="[object Object]"

[turansky]

Yet another working but unintuitive way 😉

2 component factories
1 element factory (used in example)

[thana]

@turansky and what do you think about the other stuff i wrote?

[turansky]

Looks like you need another InputComponent , which has startAdornment property (not input )

[thana]

I took everything from the MUI docs...

[turansky]

Link please 🙂

[thana]

@turansky https://mui.com/material-ui/react-text-field/#input-adornments please have a look at the code of the first example 🙂

[turansky]

It looks like connected items in forms

[thana]

I dont know what you mean... the code from above i got from the example:

<TextField
          label="With normal TextField"
          id="outlined-start-adornment"
          sx={{ m: 1, width: '25ch' }}
          InputProps={{
            startAdornment: <InputAdornment position="start">kg</InputAdornment>,
          }}
        />

I dont think this is currently doable with the mui-wrapper

[turansky]

сс @aerialist

[aerialist]

Hi @thana, here you can find the working example - TextFields. Input Adornments and the demo stand.

@turansky, yep there is a problem with inheritance in our declarations.

[thana]

@aerialist oh very cool! i was unsure whether or not to file a feature request against kotlin-mui-showcase. very cool. thank you very much :)

[aerialist]

You are welcome!
And PRs are welcome too 😉