Opened 11 years ago

Closed 10 years ago

Last modified 8 years ago

#8298 closed defect (wontfix)

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

Reported by: thekryz Owned by:
Priority: high Milestone: 1.5
Component: Dijit - Form Version: 1.2.3
Keywords: ComboBox Cc:
Blocked By: Blocking:

Description (last modified by bill)

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:

Here I want to select an option...

Selecting option:

Here I go...

After drop down is closed:

Here you can see that the first letters are hidden.

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

This is what I'd have expected

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".

Attachments (8)

combobox_bug.jpg (5.8 KB) - added by thekryz 11 years ago.
Here I want to select an option…
combobox_bug2.jpg (16.3 KB) - added by thekryz 11 years ago.
Here I go…
combobox_bug3.jpg (12.2 KB) - added by thekryz 11 years ago.
Here you can see that the first letters are hidden.
combobox_right.jpg (12.2 KB) - added by thekryz 11 years ago.
This is what I'd have expected
combobox_bug_2-0.jpg (13.0 KB) - added by thekryz 11 years ago.
So I had selected the "too long"-option right here.
combobox_bug_2-1.jpg (20.2 KB) - added by thekryz 11 years ago.
Now I want to select an option with a smaller title
combobox_bug_2-2.jpg (11.8 KB) - added by thekryz 11 years ago.
...and it still cuts off the first letters, even though it would fit.
comboboxtest.html (1.4 KB) - added by thekryz 11 years ago.
This is the test case. I used IE7 (actually, IE8 beta with IE7 engine turned on)

Download all attachments as: .zip

Change History (17)

Changed 11 years ago by thekryz

Attachment: combobox_bug.jpg added

Here I want to select an option...

Changed 11 years ago by thekryz

Attachment: combobox_bug2.jpg added

Here I go...

Changed 11 years ago by thekryz

Attachment: combobox_bug3.jpg added

Here you can see that the first letters are hidden.

Changed 11 years ago by thekryz

Attachment: combobox_right.jpg added

This is what I'd have expected

Changed 11 years ago by thekryz

Attachment: combobox_bug_2-0.jpg added

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

Changed 11 years ago by thekryz

Attachment: combobox_bug_2-1.jpg added

Now I want to select an option with a smaller title

Changed 11 years ago by thekryz

Attachment: combobox_bug_2-2.jpg added

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

comment:1 Changed 11 years ago by 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.

Changed 11 years ago by thekryz

Attachment: comboboxtest.html added

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

comment:2 Changed 11 years ago by dante

Resolution: fixed
Status: newclosed

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

comment:3 Changed 11 years ago by dante

Resolution: fixed
Status: closedreopened

whoops.

comment:4 Changed 11 years ago by bill

Description: modified (diff)
Priority: highnormal
Summary: ComboBox / FilteringSelect show only end of selected option if "too long"ComboBox / FilteringSelect: show only end of selected option if "too long"

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.

comment:5 Changed 11 years ago by bill

Milestone: tbd1.5
Summary: ComboBox / FilteringSelect: show only end of selected option if "too long"ComboBox / FilteringSelect: show only end of selected option if "too long" (IE)

Marking that this is only IE.

comment:6 Changed 10 years ago by 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).

comment:7 Changed 10 years ago by bill

Resolution: wontfix
Status: reopenedclosed

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.

comment:8 Changed 8 years ago by bill

Component: DijitDijit - Form

comment:9 Changed 8 years ago by 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/

Note: See TracTickets for help on using tickets.