ComboBox / FilteringSelect: show only end of selected option if "too long" (IE)

[thekryz]

If you have options, that have a bigger width than the DijitInputField of a ComboBox / FilteringSelect, only the end of them will be shown:

Opening drop down:

Selecting option:

After drop down is closed:

I think that it should be like in this, that the first letters of the option are shown:

To add to this: Once you had the one option selected, that was too long, and you select a shorter option afterwards, the first letters will be hidden as well in respect to how much of the "too long"-text was hidden. This can be seen in the screenhots named "combobox_bug_2-x".

[thekryz]

Here I want to select an option...

[thekryz]

Here I go...

[thekryz]

Here you can see that the first letters are hidden.

[thekryz]

This is what I'd have expected

[thekryz]

So I had selected the "too long"-option right here.

[thekryz]

Now I want to select an option with a smaller title

[thekryz]

...and it still cuts off the first letters, even though it would fit.

[thekryz]

This seems to be an IE issue. Firefox doesn't show any of this weird behaviour at all. And it seems to only happen within a <table> tag. I tried braking the example down to a minimum. The result is in the attachment following this comment.

[thekryz]

This is the test case. I used IE7 (actually, IE8 beta with IE7 engine turned on)

[dante]

(In [16205]) fixes #8298 - minor doc notation.

[dante]

whoops.

[bill]

Updating description to include screenshots, and lowering priority. I don't think this is a 1.3 show stopper (sorry). Feel free to submit a patch for this though, then we could roll it in.

[bill]

Marking that this is only IE.

[thekryz]

I've dug a little. It starts in the ComboBox?, where in "_selectOption" the method "this._setCaretPos" is called. In there it calls "dijit.selectInputText" to select the last point in the text (I guess this is so to allow the user to extend the text at the end). This happens as follows:

with(range){
	collapse(true);
	moveStart("character", start);
	moveEnd("character", stop);
	select();
}

If start and stop are 0, the problem is not there.

This makes IE jump to the end of the text after selecting an option.

I don't know if it is possible to make IE's pointer go to the end (so the user can extend the text at the end if he wants to) but focus on the first part of the word (so the selected option's beginning is shown instead of the end).

[bill]

Thanks thkryz, I think you are right about what's happening. I think having the caret at the end makes it easier to change the text by backspacing, and also to use backspace to widen the search (ie, get more values in the dropdown).

Unfortunately, I don't see a solution to this, without breaking the caret positioning. There is a workaround though: just override _setCaretPos() to do nothing.

If you ever figure out a way to make this work, let us know. Otherwise I think we'll just need to suggest that workaround of overriding _setCaretPos(), or of course, making your field wide enough that it doesn't overflow.

The other good news is that with the latest IE8, if you select the short option after selecting the long one, it now displays correctly.

[Colin Snover]

Firefox 4+ is now also affected by this issue. Not sure why they changed the way it works, but there it is. It may be worth reopening this ticket, given that it now occurs in 2 major browsers. Test case: ​http://jsfiddle.net/snover/96Ud8/