Thanks for your contributions. The fix was even simpler ... You can see the default value is being selected as a String. I just had to parseInt() to get it to match the values in the dropdown. Everything is working now!
--
Hello!
I am trying to create a dropdown where I can see and update the category of a topic. My question is this: how do I prefill the default value of the select component if the topic already has a category?
I've created a select component that pulls its values / labels from a simple SELECT query:
select id, title
from topics
where topics.is_category=TRUE
I want to set the default dropdown value in the select component if my selected topic already has a category! I'm pulling the data for the selected topic with another SELECT query, that includes a category_topic_id if it exists. Otherwise, this is null.
I've tried to retrieve this value from a topics SELECT query that gets all the data from the selected topic. I've tried to use the category_topic_id to prefill the select component, but the select component still appears empty.
(In this case, "Category 1" has id (value) of 21.)
How do I set the dropdown value to show the title of the category if it exists for the topic? Do I need a new query? Do I need a filter on the query that populates the dropdown? If so, how do I retain the ability to select a new category from all that are available?
So, the default value could already exist as an item in the dropdown?
If this is the case, you could write a JS query that sets the value of that component to that value. Also, is the Values field pre-populated? A little more info could help me get a clearer idea on the larger issue.
Is the value being set correctly for the component with the 'Default value' but the 'Placeholder' is being shown instead? If that is the case and you want to show the 'Default value' as the 'Placeholder, when there is a value, you can use a ternary like in the example above. I hope I'm understanding your issue correctly and that this helps
@everett_smith I'm sorry to reply in an old topic but I'm having a similar problem.
The default value is overwritten from the placeholder value.
It seems that placeholder is mandatory, so if you put it empty, it looks empty the default value.
As you suggested, I've set the placeholder value as the default value, but the style is different.
Is there a way to show a default value in a select component with the same style of an input box?
Region2 above is the same default value used in an input component.
Hi @number15 Thanks for checking in! I am only able to reproduce this behavior if the default value is not in the list of options.
For example, I have 9 as my default value, but it shows an empty string (my placeholder) because 9 is not a valid selection.
However, if I keep the place holder as an empty string, but make the default value a valid option, it shows the default value:
The default value should be overriding the placeholder. Keep in mind that the default should reflect the value field, not the label. For example, if I want to have WP selected by default in the below example, I would be WP's value in the default value field, which is Option 1. Is there any chance WP has an id in the value section?
One thing to note is that the 'Default value' is separate from the 'Placeholder'.
