Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Show-if inputfields: hide by default, then show #179

Open
Toutouwai opened this issue Apr 18, 2018 · 7 comments

Comments

Projects
None yet
4 participants
@Toutouwai
Copy link

commented Apr 18, 2018

Short description of the enhancement

Currently a show-if inputfield is shown by default, and then hidden if the show-if condition evaluates false. This can take a moment or two, so results in a "flash of unhidden content" that can be a bit startling/confusing to users.

My suggestion is that this be reversed, so admin themes have a CSS rule that hides show-if inputfields with display: none (show-if inputfields already receive a InputfieldStateShowIf class), and then once the show-if condition is evaluated true the inputfield is shown (either with an inline style or through the addition of a class). This would avoid the flash of unhidden content.

@adrianbj

This comment has been minimized.

Copy link

commented Apr 18, 2018

+1
This has bugged me for a long time. FOUCs are one of my pet peeves!

@szabeszg

This comment has been minimized.

Copy link

commented Apr 18, 2018

This would avoid the flash of unhidden content.

Wouldn't starting with a hidden element introduce another type of "flashing", namely when the inputfield should not be hidden initially (because of the condition evaluating to true)?

@Toutouwai

This comment has been minimized.

Copy link
Author

commented Apr 18, 2018

Wouldn't starting with a hidden element introduce another type of "flashing", namely when the inputfield should not be hidden initially (because of the condition evaluating to true)?

I think that's a lot less problematic because the user doesn't end up seeing something they're not meant to see. Instead of them thinking "what on earth was that?" they are just waiting a fraction longer for an inputfield to appear.

The only way to avoid any visual change is if all inputfields are hidden until the show-if evaluations are completed, but I don't know if we want to go there (e.g. if there is a Javascript error all fields would stay hidden).

@szabeszg

This comment has been minimized.

Copy link

commented Apr 18, 2018

I think that's a lot less problematic

What if there are other inputfields to its right? Won't they change their positions/widths during this flash? When all inputfield widths in a row do not add up to 100% then things can go weird. Am I overlooking something?

@LostKobrakai

This comment has been minimized.

Copy link
Collaborator

commented Apr 18, 2018

Show-If conditions are also calculated on the php side (pw must know which fields to save or not), so there would be the possibility for precalculating the hidden/shown state and letting js just update as soon as it kicks in.

@Toutouwai

This comment has been minimized.

Copy link
Author

commented Apr 18, 2018

there would be the possibility for precalculating the hidden/shown state

I like this idea.

Speaking of the PHP evaluation of show-if/required-if: I think it would be great if the evaluation of these could be divided off from the current protected functions in InputfieldForm to public functions that could have a wider application.

For instance, I think there can be uses for knowing via the API whether a given field will show on a given page, or whether a given page has all its required fields populated. I once looked at making a module to prevent publication of pages from ProcessPageList when the required fields are not populated but the evaluation of the required-if conditions is fairly complex. Now I see the code is already there in InputfieldForm but not in a method that lends itself to a broader use.

@Toutouwai

This comment has been minimized.

Copy link
Author

commented May 26, 2018

I did this as a temporary workaround and it seems to be working well...

In /site/ready.php:

$wire->addHookBefore('Inputfield::render', function(HookEvent $event) {
    $inputfield = $event->object;
    if($inputfield->showIf) $inputfield->addClass('InputfieldStateHidden', 'wrapClass');
});

In some custom admin CSS:

/* Hide show-if inputfields by default (FOUC), but not inside Listers (for example Image fields) */
.InputfieldStateHidden { display:none; }
.AdminDataTable .InputfieldStateHidden { display:block; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.