How to programmatically set the value of a userPicker suggest widget?

I’m trying to use the userPicker suggest widget, and it works great for manually choosing a user. However I have one situation where I need to set the userPicker value based on an event triggered by another widget. I’m able to use .getValue() and .clear() without any problems, but .setValue() doesn’t work at all.
Velocity macro to setup the widget (this works as I expect, and correctly sets a default value):

#set ($userPickerParams = {
                'data-userScope': 'GLOBAL_ONLY',
                'value': $doc.getValue('owner'),
                'id': 'fPageOwner',
                'name': 'fPageOwner'
            })
#userPicker(false, $userPickerParams)

In the JSX I can read the value from the picker without jQuery:

const fOwner = document.getElementById('fPageOwner').selectize.getValue();

If a value has been manually set, I can clear it from the JSX without jQuery:

document.getElementById('fPageOwner').selectize.clear();

However, I have not been able to find any method of calling .setValue() that works. Below are some of the things I’ve tried. None of these have any effect and there are no errors or warnings generated in the console. The value of the user variable I’m trying to write is present in the userPicker’s list.

Without jQuery (JSX is set to be parsed):

const user = "$escapetool.javascript($xcontext.user)";  //This sets user to "XWiki.UserName"
document.getElementById('fPageOwner').selectize.setValue(user);

With jQuery (based on online examples for using selectize.js, JSX set to be parsed):

const user = "$escapetool.javascript($xcontext.user)";  
require(['jquery', 'xwiki-suggestUsers'], function ($) {
  const selector = $('#fPageOwner').selectize();
  const selectize = selector[0].selectize;
  selectize.setValue(user);
});

I’ve tried all these versions of the require statement:

require(['jquery'], function ($) { ... });
require(['jquery', 'xwiki-selectize'], function ($) { ... });
require(['jquery', 'xwiki-suggestUsers'], function ($) { ... });

I must be missing something simple, but I’ve been at this for days and haven’t found any hint of what I might be doing wrong.

2 posts - 2 participants

Read full topic