Unable to explicitly expand/collapse list via UX about jquery-editable-select HOT 3 CLOSED

I fixed this locally. Let me know if you're interested in a PR.

I add this function:

EditableSelectUtility.prototype.isOverDisclosureArrow = function (event) {
    var rightPadding = parseInt(this.es.$input.css('padding-right'));
    var rightBorder = parseInt(this.es.$input.css('border-right-width'));
    return (event.offsetX > (this.es.$input.outerWidth() - (rightPadding + rightBorder)));
};

And then added these handlers in initializeInput():

        .on('mousemove', function (e) {
            if (that.isOverDisclosureArrow(e)) {
                that.es.$input.css('cursor', 'default');
            } else {
                that.es.$input.css('cursor', 'auto');
            }
        })
        .on('mousedown', function (e) {
            if (that.isOverDisclosureArrow(e)) {
                if (that.es.$input.hasClass('open')) {
                    that.es.hide();
                } else {
                    that.es.show();
                }
            }
        })

That treats the disclosure arrow more like a button (when you hover over it you get an appropriate cursor, and when you click on it, the state toggles, period). This doesn't deal with the list being shown on focus (I'm thinking of adding an option to only show the list on focus if the value is empty).

from jquery-editable-select.

Hi @BobDickinson, I completely agree with you. I haven't had this kind of use case, but I'm going to cover them all in the next release.

Since the user may want to choose WHEN the dropdown should open (in your use case you want to open the list by clicking or hovering on the disclosure arrow, but others may want to open the list programmatically), I will add a new trigger option that allows to manage this choice: click, focus, manual.

You already have methods to open or close the dropdown manually, so for your users you may have something like this:

<!-- HTML -->
<span id="disclosureArrow"></span>
<select id="mySelect">...</select>

/* CSS */
#mySelect { background: none }
#disclosureArrow { float: right; }

// JavaScript
var mySelect = $('#mySelect').editableSelect({ trigger: 'manual', filter: false });

// open/close the dropdown using the disclosure arrow events
$('#disclosureArrow').on('click', function () {
   if (mySelect.is('.open')) mySelect.editableSelect('hide');
   else mySelect.editableSelect('show');
});

from jquery-editable-select.

FYI, trigger option is now available from v2.2.0.

from jquery-editable-select.