Uploaded image for project: 'Nuxeo Platform'
  1. Nuxeo Platform
  2. NXP-13715

Add widget property on single suggestion widget to dropdown select2 suggestion only on arrow

    XMLWordPrintable

    Details

    • Type: Improvement
    • Status: Resolved
    • Priority: Minor
    • Resolution: Fixed
    • Affects Version/s: 5.8, 5.9.1
    • Fix Version/s: 5.9.2
    • Component/s: Layouts & Widgets
    • Upgrade notes:
      Hide

      It is now possible to restrict the suggestion dropdown of single select2-based widgets to the right arrow with the 'dropdownOnArrow' widget property

      Show
      It is now possible to restrict the suggestion dropdown of single select2-based widgets to the right arrow with the 'dropdownOnArrow' widget property

      Description

      This is helpful when a user provides a custom formatter inserting links. (Typical usecase is a link to open a fancybox and display info about seleted items).

      When select2 is in multiple mode, it's ok. But in single mode, there is a listener on the select2 container that catch all mousedown event.

      The idea is to provide a dropdownOnArrow boolean widget property and when set to true, the suggestion will be displayed only when clicking the arrow at the right of the select2 box.

      This will require to patch select2.js

      diff --git i/nuxeo-platform-ui-select2/src/main/resources/web/nuxeo.war/scripts/select2/select2.js w/nuxeo-platform-ui-select2/src/main/resources/web/nuxeo.war/scripts/select2/select2.js
      index 5c34342..b744e5a 100644
      --- i/nuxeo-platform-ui-select2/src/main/resources/web/nuxeo.war/scripts/select2/select2.js
      +++ w/nuxeo-platform-ui-select2/src/main/resources/web/nuxeo.war/scripts/select2/select2.js
      @@ -1950,7 +1950,7 @@ the specific language governing permissions and limitations under the Apache Lic
                       this.selection.focus();
                   }));
       
      -            selection.on("mousedown", this.bind(function (e) {
      +            selection.on("mousedown", ".select2-arrow", this.bind(function (e) {
       
                       if (!this.container.hasClass("select2-container-active")) {
                           this.opts.element.trigger($.Event("select2-focus"));
      
      

        Attachments

          Issue Links

            Activity

              People

              • Votes:
                0 Vote for this issue
                Watchers:
                2 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved: