Dropdowns with "Allow custom text entry" don't show all options when clicking the dropdown

[Justin Jung]

Q: Dropdowns with "Allow custom text entry" don't show all options when clicking the dropdown

A: HTML doesn't have an element that would show the same behaviour as the dropdown fields where the user can enter text in a PDF. Currently, WebViewer uses the HTML 'datalist' element which is a close approximation, however it filters out values based on the input text when clicking dropdown.

To improve the behavior, you can add this customization in config.js. This will always show all the options when dropdown is opened, with a trade off of the input field value is temporarily gone when the input is focused until a new value is selected (if you focus away without selecting, the previous value will be displayed again).

$(document).on('viewerLoaded', function() {

  readerControl.docViewer.on('pageComplete', function(e, pageIndex) {

    $('#pageWidgetContainer' + pageIndex).find('datalist').each(function() {

      $(this).prev().on('focus', function() {

        this.value = '';

      });

    })

  });

});