B-input: custom icon-right is replaced when b-field has a message

[fabiofdsantos]

Overview of the problem

Buefy version: 0.8.18
OS/Browser: macOS / Safari

Description

If b-field has a message of type danger, the custom icon-right of b-input is replaced.

Steps to reproduce

      <b-field
        label="Password"
        type="is-danger"
        message="Password needs more than 5 characters."
      >
        <b-input
          type="password"
          value="123"
          icon-right="close-circle"
          icon-right-clickable
        />
      </b-field>

Expected behavior

Display the message but persist the custom icon (if it has been set previously). Or persist it if it's clickable.

Actual behavior

The custom icon is being removed.

[jtommy]

Probably it's better add a new prop in order to choose what's the priority

[fabiofdsantos]

So, to recap I see at least 3 potential approaches:

• If icon-right-clickable or icon-clickable is defined, the icon will be persisted as password-reveal.
• Custom prop to define priority.
• Append a new icon in case of an error and have a maximum of 2 icons.

I'm not totally against any option but I think we should avoid too much props that are somehow dependant. Even without the custom prop to define priority, we are able to determine if the custom icon should be displayed (e.g. a clear button to be displayed based on input length).

[jtommy]

Probably the first approach is the correct way and you can hide the right icon when input is not valid setting it to undefined

[fabiofdsantos]

@jtommy Yes, I agree.