• Resolved sioc

    (@sioc)


    Hi everybody, and MANY thanks to the UM team for this plugin, whose name says it all…

    I recently tried to create a profile form with a kind of “user agreement” mandatory checkbox in french language (so with a lot of chars like é à ?) and I discovered this annoying malfunction, and even managed to find a possible fix :

    Description : when adding a checkbox field on profile, it’s state is not properly reused when editing the profile if the field value contains non ASCII characters

    How to reproduce :
    * install a fresh WordPress (I personally use a docker image to ensure a fresh start https://hub.docker.com/_/wordpress/ )
    * a single admin account is enough to demonstrate the issue
    * install Ultimate Member plugin from WordPress admin, and activate it
    * add a menu, with a single item pointing to the “User” page, and activate the menu in the theme
    * in UM form settings, edit the “Default Profile” form
    * add a custom field, of type “checkbox”
    * use “test” for the title, name, meta and help
    * input a value with UTF8 characters in the “Edit Choices” box, such as “je parle le fran?ais”
    * IMPORTANT : select YES for the required field option, this help too see the problem
    * add the new field, save the form
    * go to the front end, and use the menu to navigate to the “User” page
    * edit the profile, check the custom “test” box (otherwise it will complain because the field is required)
    * save the profile
    * edit again : the field is marked as checked
    * save the profile again

    Problem observed :
    * the page complains that the field is required, although it was checked
    * the field is no more checked
    * from here, if you continue, checking the field and saving again will be OK, but this is not acceptable for a normal user

    Awaited behavior :
    * the profile, already saved with the box checked, should be saved with no error message

    Workaround : simply don’t use any non-ASCII character in the “Edit Choices” value

    Analysis :
    I looked around with Firefox debugging tools to understand how a checked box could possibly be considered as non checked : first, the network analysis show that no value is posted for the checkbox (name of the posted form parameter would be test[] or something like that).
    Then I discovered, with the HTML view, that the checkbox was in reality 2 different HTML tags : the first is the “real” HTML input type=checkbox but this one is made invisible with opacity:0 , the second is a combination of span/i elements that appear just like a checkbox, using custom icons, and that allow to have something more beautiful to show to the user instead of the default HTML checkbox.
    When the bug occur, the two elements have opposite states : the hidden checkbox is not checked, and the visual effect is checked.
    I tracked the bug along the source code of UM plugin, and finally found an explanation in the core/um-fields.php file : the rendering of the checkbox use the “is_selected” method with the current saved value, such as :
    $this->is_selected($key, $v, $data)
    this is called several times, one time for the checkbox, one time for the visual effect, but I remarked that the $v value changed between the 2 calls… with this :
    $v = apply_filters(‘um_field_non_utf8_value’, $v );

    What happen is that the visual effect state is resolved before this statement, and so is always matching the saved value, but the real checkbox state (which is used to generate post body) is resolved after the UTF8 removal : so, if the $v value contains any non UTF8 char, the two states are incoherent.

    Patch proposal :
    I propose the following modification, that simply involve a new $selected variable to factorize the 3 calls to the is_selected method :

    core/um-fields.php l.1918

    							$selected = $this->is_selected($key, $v, $data);
    							if ( $selected ) {
    								$active = 'active';
    								$class = "um-icon-android-checkbox-outline";
    							} else {
    								$active = '';
    								$class = "um-icon-android-checkbox-outline-blank";
    							}
    
    							$output .= '<label class="um-field-checkbox '.$active.' um-field-half '.$col_class.'">';
                                
                                $um_field_checkbox_item_title = $v;
    
    							$v = apply_filters('um_field_non_utf8_value', $v );
        
    							$output .= '<input  '.$disabled.' type="checkbox" name="'.$key.'[]" value="'.strip_tags( $v ).'" ';
    
    							if ( $selected ) {
    								$output.= 'checked';
    							}
    
    							$output .= ' />';
    
    							if( ! empty( $disabled ) &&  $selected ){
    			                        $output .= $this->disabled_hidden_field( $key.'[]', strip_tags( $v ) ); 
    			                }
    

    Hope it helped….

Viewing 2 replies - 1 through 2 (of 2 total)
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Profile + Checkbox bug with UTF8’ is closed to new replies.