What is cleanest way to align leftSection in TextInput

[weak ibex]

I am trying to add some text as TextInput leftSection and have to do hacks to make it work. Any better way to do this?

Here is an example of the issue: https://mantine-left-section-sleeksky.replit.app/

This is the code: https://replit.com/@sleeksky/MantineLeftSection#src/App.tsx

Thanks

[gusty smelt]

You need to set left section width

[weak ibex]

That does not work for this use case as my text is dynamic and varies in size. I will need to add ref on leftSection, find width and then set it. It works pretty well in NumberInput where I can just provide a prefix/suffix but those props don't work for TextInput.

[gusty smelt]

If you want it to be part of the value

<TextInput value={`https://${yourValue}`} />

[weak ibex]

This acts weird when user changes the value. But I was able to make it work using a ref for now. Thanks @gusty smelt