Field select with the empty value

Oh, good one. I’ll take a look.

Hi @dovyp,

Please check and fix this issue soon!

Thank you!

Can you try it with 4.1.22?

Hi @dovyp,

It still has problem with version 4.1.22

Best regards,

Hi,

I’m not able to reproduce this issue on my local installation. I can set an empty option and choose it from the list.

Here is the field configuration:

 array(
                'id'       => 'opt-select',
                'type'     => 'select',
                'title'    => __( 'Select Option', 'redux-framework-demo' ),
                'subtitle' => __( 'No validation can be done on this field type', 'redux-framework-demo' ),
                'desc'     => __( 'This is the description field, again good for additional info.', 'redux-framework-demo' ),
                //Must provide key => value pairs for select options
                'options'  => array(
                    '' => 'Default',
                    '1' => 'Opt 1',
                    '2' => 'Opt 2',
                    '3' => 'Opt 3',
                ),
                'default'  => ''
            ),

Stormit,

Does this issue happens in the last Redux version? if so, please share your field configurations.

Thanks.

Hi @mohammedeisa

I still see this issue with the latest version. Below is my code

array(
		'id'       	=> 'ts_blog_style'
		,'type'     => 'select'
		,'title'    => 'Blog Style'
		,'subtitle' => ''
		,'desc'     => ''
		,'options'  => array(
			''		=> 'Default'
			,'list'		=> 'List'
		)
		,'default'  => ''
		,'select2'	=> array('allowClear' => false, 'minimumResultsForSearch' => 'Infinity')
	)

And it shows as this screenshot

https://prnt.sc/wcp61w

Best regards,

Thanks, Stormit for pointing this out. I can reproduce the issue on the latest Redux version.
I’ve reported the issue to the development team and you can follow it from here: https://github.com/reduxframework/redux-framework/issues/3773

Thanks.

Hi,

After digging deeper into this issue, I found that your field configurations will not make the field work the way you need.

The option needs to have a value in order to be initially selected using the “default” node in the field array.

If you need an empty option, you can do that using the “placeholder” node in the field array.

You may assign “true” to “allowClear” which exists in the “select2” node of the field array. This will add an option to clear the field and automatically select the option in the “placeholder” you filled.

Can you please try the following configuration:

                array(
                    'id' => 'ts_blog_style', 
                    'type' => 'select', 
                    'title' => 'Blog Style', 
                    'subtitle' => '', 
                    'desc' => '', 
                    'options' => array(
                        '2' => 'Default2',
                        'list' => 'List'
                        ),
                    "placeholder"=> 'Test',
                    'select2' => 
                    array(
                        'allowClear' => true,
                        'minimumResultsForSearch' => 'Infinity'
                        )
                    )

Thanks.

• This reply was modified 3 years, 10 months ago by mohammedeisa.

Hi @mohammedeisa,

But, it worked before. Could you please tell me why?

Thank you!

Hi Stormit,

This is a limitation of the recent Select2 versions. They require to add an empty <option> in the select field in order to make the placeholder work.

So, We added the empty option to make sure that the placeholder option will work when a Redux user fills it with a value.

The following is mentioned in Select2 documentation: https://select2.org/placeholders
For single selects only, in order for the placeholder value to appear, you must have a blank <option> as the first option in your <select> control. This is because the browser tries to select the first option by default. If your first option were non-empty, the browser would display this instead of the placeholder.

This empty <option> causes the issue we are talking about because it’s added in the first place in the select options and Select2 considers the option with empty value added by Redux as a repetition.

Please let me know if you have any questions.

Thanks.