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

12 views
Skip to first unread message

Justin Jung

unread,
Nov 23, 2017, 5:51:11 PM11/23/17
to PDFTron WebViewer
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 = '';
      });
    })
  });
});
Reply all
Reply to author
Forward
0 new messages