Jump to content

InpufieldSelect: hide and select the single option - if only one option. Is it possible?


The G
 Share

Recommended Posts

Hey, guys!

From a UX point of view, it doesn't  make sense to have a single option select, so I'm wondering if the following InputfieldSelect behaviour is possible:

  • if it has only one option, make it selected and hide the select
  • if is has more than one option, show it as usual

Thank you!

Link to comment
Share on other sites

Hi,

if you don't want to allow 0 option selected (compusaltory field) as i agree with you, a select with only one option..., honestly, in this case i would do this server side
if there is only one option retrieved from your query/selection or however you get the options, display a text field with readonly attribute
else, display... a select 🙂

have a nice day

Link to comment
Share on other sites

Thank you for your time. It's a good idea, it's just that the end result is not that different from a select with a single option, unless I also change the field description (which says "Choose here blah blah...") or even if I change the description.

I was hoping for Inputfield properties like `showIf`, which would've been nice to support booleans in addition to string selectors*. Oh well, I don't care enough to fight the defaults, so I'll just let it be.

*I guess I meant a `show` property, akin to 'required' 😄

Link to comment
Share on other sites

hi,

you are absolutely right a text input width a choose... label would be a bit wierd too 🙂

actually you showif idea could be a solution too, you could just put label and select inside a wrapping element (div?) and if you have only one option just add a class to that wrapper that send it 10000px to the left with an absolute position, this way it would keep working but without being shown
the only thing is in this case it would be a better idea not to have it on a multi input line on large screen
and it would work even better than a show attribute as this attribute would not work on the label but only on the input

have a nice day

Link to comment
Share on other sites

Something like this hook in your ready.php file?

wire()->addHookAfter('InputfieldSelect::render', function($event) {
	$inputfield = $event->object;
	if($inputfield->name == 'my_select_field') {
		if(count($inputfield->options) == 1) {
			$inputfield->description = "text for one item";
			$event->object = $inputfield;
			$event->return = "<p>{$inputfield->options[1]}</p>";
		} else if(count($inputfield->options) == 0) {
			$event->return = "<p>No options!</p>";
		}
	}
});

EDIT: Added condition so that it only operates on the relevant inputfield. Also, note that while this fixes the UI, you will need to make sure the value is provided where needed as it is no longer selected (may be possible to address this by making the value required and providing the default value).

EDIT2: For example, you could set the value like this:

$page->of(false);
$inputfield = $fields->get('my_select_field')->getInputfield($page);
if(count($inputfield->options) == 1) {
    $page->test_select = $inputfield->options[1];
    $page->save('my_select_field');
}

Is that any help @The G?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...