Custom value for select component/field

Help & Support šŸ’»
1

Hi,

I have a select box (Select/Tag) component inside a form, it loads its predefined options from the database. I would like to be able to add new, non existing values, but when no option is selected from the dropdown, the field is reset on focus change.

I am able to change the value of the field programatically with setValue, but unfortunately this still results in an empty field (despite the value being good) - which is confusing.

Are there any workarounds?

Thank you!

2

Hi @Istvan,

Firstly, you might want to add examples of how exactly you are doing things. For example, in the context of what youā€™re asking, explain how you set the options of the field, how you add the new, non-existing values, etc.

I hope you donā€™t take this as rude, itā€™s just easier to understand what the issue might be when itā€™s possible to reproduce your setup of the form/field. And it doesnā€™t have to be a lot, the more minimalistic, the better. :+1:

Now then, about the issues with the select/tag field. I donā€™t really understand what you mean with:

What exactly is being reset? If you select no option, then thereā€™s nothing to reset no? Or do you mean it resets the options to the initial ones from the database?

Besides that, I donā€™t think this should be too difficult to achieve. For example, Iā€™ve set up a page with a form that has a select/tag field:

image
image630Ɨ249 5.41 KB

Then I created a new State variable with the initial options (which would correspond to the ones from your DB) and set those in the fields settings:

image
image380Ɨ244 8.09 KB

image

So right now there is just that one option in there. Now, if we update this State variable like:

image
image405Ɨ133 3.46 KB

Those options show up in the select, can be normally selected and also programmatically set like:

image

Maybe you got a property name wrong? I might also completely misunderstand what your issue is, please tell me so if thatā€™s the case.

3

Hi Max,

Thank you, you are right. Reading back my original message, the essence of it is not clear.

I have a Select/Tag component, which loads its options from the database. Letā€™s say we have the values

A1
A2
B1
B2
C1
C2

Standard behaviour is that the user will be able to choose just from these 6 values. With autocomplete it is possible to filter the options, so if I introduce A in the field, then just A1 and A2 will remain as choosable.

Everything is fine until here. The reason I am writing is that the current use case needs this field capable to accept completely new values from the user. For ex.: A is introduced > options are filtered to A1 and A2 > BUT the user has to add A3. The new A3 value is then saved into the DB and next time the form is loaded, this A3 will appear automatically among the options.

The problem is that A3 when introduced, is going to remain in the input area just until the focus is on that. After switching to another field, the custom value I entered into the field is cleared/reset:

select-tag reset

I was able to resolve the behind the scenes part, the value is saved even if the text is cleared, but it is not user friendly as it confusing if the introduced text disappears.

1 Like
4

Now I clearly understand. :slight_smile:

As I donā€™t know how you implemented the ā€œbehind the scenesā€ part, although it would be very intriguing to see, I scrambled together my own solution.

It might not fit the way how youā€™d like it but, if you have some experience with JavaScript, you can customize it to your liking. Or else, just ask away, Iā€™ll gladly help.

I did it in the following way:

  1. Create new state variable holding the options

    image
    image485Ɨ141 9.29 KB

  2. Create an action which adds an input EventListener to the text input of the select (change ā€˜.selectā€™ to the name of your select component)

    const input = document.querySelector(".select input");
let options = {{state.options}};

function onInput(e) {
  {{state.options = options.filter(o => !o.includes("(new)"))}}
  if (options.some(o => o.includes(input.value.trim()))) return;
  {{state.options.push(input.value.trim() + " (new)")}}
}

return input.addEventListener("input", onInput);

    When something is written in the text input, the listener checks if any option includes the inputted text, if not then that text + " (new)" is added as an option.

    select

  3. Create a new action which serves as the On Change trigger of the select component.

    const index = {{state.options.findIndex(o => o === data)}};
if (index > -1) {
   {{state.options[index] = state.options[index].replace(" (new)", "")}};
   {{ui.select.setValue(state.options[index])}}
};

    This just removes the " (new)" part of the new option and re-selects it.

All in all it will look like this:
select_final

I hope this helps you, even just inspiration wise. Else, as I said before, just let me know and weā€™ll figure something out.

1 Like