Allow passing className for the input element

[viveleroi]

I need to set specific className(s) on the input element itself, not any of the wrapped DIVs. We have existing classes for styling form fields but they expect disabled attributes which are only available on the input itself.

I thought classNames.input would do it, but that doesn't appear to work.

A few people have asked for this before the PRs were closed without explanation. #262 #95

[viveleroi]

I’ll try again but when I tried this it just the class names in the div still.

…

On Thu, Oct 12, 2023 at 6:05 PM Amumu ***@***.***> wrote: Using classNames.input #570 <#570> Does it meet your requirements? — Reply to this email directly, view it on GitHub <#594 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAARITS5YCPXGOXMIM6GDJTX7CHV7ANCNFSM6AAAAAA56HB2WY> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[viveleroi]

Someone deleted their comment but they asked if classNames.input would work for me. Even though I said no in my original post I tried again:

<InputNumber
  ...
  className={styles.numberInput}
  classNames={{
    input: clsx(styles.numberInput, formsStyles.textFormField, className, {
      [formsStyles.error]: isError
    })
  }}
/>

The classes like _textFormField_gqvlq_23 are still applied to the wrapper div, not the input I need.

<div class="rc-input-number _numberInput_1wynb_1 _textFormField_gqvlq_23 dark-blue-regular-text _numberInput_1wynb_1"><div class="rc-input-number-handler-wrap"><span unselectable="on" role="button" aria-label="Increase Value" aria-disabled="false" class="rc-input-number-handler rc-input-number-handler-up"><span unselectable="on" class="rc-input-number-handler-up-inner"></span></span><span unselectable="on" role="button" aria-label="Decrease Value" aria-disabled="false" class="rc-input-number-handler rc-input-number-handler-down"><span unselectable="on" class="rc-input-number-handler-down-inner"></span></span></div><div class="rc-input-number-input-wrap"><input autocomplete="off" role="spinbutton" step="1" name="quantity" required="" class="rc-input-number-input" value=""></div></div>

[yoyo837]

I'll try to fix it in the next week or two.

[viveleroi]

I would appreciate it, we're blocked although I have workarounds I can do if needed.

[viveleroi]

Any luck?

[yoyo837]

Any luck?

It'is the time.

[yoyo837]

It looks like you can do this:

.input-wrapper input {
 /* input style */
}

<InputNumber classNames={{
  input: 'input-wrapper'
}} />

[viveleroi]

I've tried to explain why that's not ideal for us. Yes, we can design our code this way, but we've already built all of our input styles with the assumption that we can apply a class directly the input because the library we use for most inputs, blueprintjs, allows it.

So it's either we duplicate and rewrite our css to work around this issue, or we wait until this is fixed, or fork the repo, or look for alternatives, etc. I was just hoping it could be fixed, as that would benefit many users.

[yoyo837]

Current behavior may be intentional. CC @MuxinFeng @MadCcc

[viveleroi]

If so I'm asking for a way to add a class name to the actual input element.