Support » Plugin: Advanced Custom Fields: Table Field » ‘%’ character in Table Header breaks ACF Block Functionality

  • Resolved FTF Developer

    (@ftfdevelopment)


    Hi Guys,
    I’m using your plugin to add tables into ACF Blocks, and ran into some issues that were super confusing at first.

    A couple of the columns on my test table were titles along the lines of “Highest 10%” and “Lowest 10%”. As soon as I entered the ‘%’ in the column header, all editing and saving of the table fails, and the console starts spewing out:

    Uncaught URIError: URI malformed
        at decodeURIComponent (<anonymous>)
        at ACFTableField.t.data_get (input-v5.js?ver=1.3.7:333)
        at ACFTableField.t.table_build_json (input-v5.js?ver=1.3.7:857)
        at ACFTableField.t.cell_editor_save (input-v5.js?ver=1.3.7:1098)
        at HTMLDivElement.<anonymous> (input-v5.js?ver=1.3.7:962)
        at HTMLBodyElement.dispatch (load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,moxiejs,plupload&ver=5.1.1:3)
        at HTMLBodyElement.r.handle (load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,moxiejs,plupload&ver=5.1.1:3)
    ACFTableField.t.data_get @ input-v5.js?ver=1.3.7:333
    ACFTableField.t.table_build_json @ input-v5.js?ver=1.3.7:857
    ACFTableField.t.cell_editor_save @ input-v5.js?ver=1.3.7:1098
    (anonymous) @ input-v5.js?ver=1.3.7:962
    dispatch @ load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,moxiejs,plupload&ver=5.1.1:3
    r.handle @ load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,moxiejs,plupload&ver=5.1.1:3

    The error spitting out in input-v5.js line: 333 which is the catch in a try/catch, but it’s not logging the error in the format that the catch seems it should be, I think this is because the error, that it originally throwing at (most likely) input-v5.js line: 320, is also erroring in the catch itself because it’s related to the
    decodeURIComponent( val.replace(/\+/g, '%20') ) which is both 320 and 330.

    You should be able to reproduce by creating a new ACF Field Group with a “Table” in it and associating that with an ACF Block, adding the corresponding ACF Block in Block Editor, turn on Headers and add a header value with ‘%’ in it, possibly at the end of the header value. Then click to the next field so it is saved, shortly there after the console will start showing errors, and the next field edited, the edit box will never go away.

    It looks like you can probably use either a regex replace on the ‘%’ to it’s unicode value (I believe that ‘%25’) before the decode, or do a full encode before the decode to handle any other characters that might cause issue as well (I did not test ‘”?\/#)

Viewing 3 replies - 1 through 3 (of 3 total)
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘‘%’ character in Table Header breaks ACF Block Functionality’ is closed to new replies.