rlakoud / simple-gwt

Automatically exported from code.google.com/p/simple-gwt
0 stars 0 forks source link

Set focus to list after clicking the ComboBox icon to enable keyUp and keyDown #2

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago
What steps will reproduce the problem?
1. Click the icon in the
/simple-gwt/src/demo/com/googlecode/simplegwt/combobox/client/ComboBoxDemo.java

What is the expected output? What do you see instead?
Expected: Focus shifts to the list
Instead: Must explicitly set focus to the text box to use the keyboard

What version of the product are you using? On what operating system?
SimpleGWT
GWT 1.7.4

Please provide any additional information below.

Original issue reported on code.google.com by jchim...@gmail.com on 23 Apr 2009 at 2:20

GoogleCodeExporter commented 9 years ago
After thinking about this a bit more, I'm not sure this is a defect. 

The user will have already used the mouse to click the icon. A subsequent 
mouseover,
which sets focus to the list, followed by item selection via the mouse, is a
reasonable design.

Original comment by jchim...@gmail.com on 23 Apr 2009 at 4:51

GoogleCodeExporter commented 9 years ago
The icon actually has a handler for keyboard navigation without changing focus. 
What 
browser are you using where this isn't working? I've tested on Chrome, Firefox, 
and 
IE6.

Original comment by itruett on 23 Apr 2009 at 7:54

GoogleCodeExporter commented 9 years ago
Hosted mode only. I'll test in Firefox and report back.

Original comment by jchim...@gmail.com on 23 Apr 2009 at 9:52

GoogleCodeExporter commented 9 years ago
Firefox.

There is an additional wrinkle: the suggestions list does not get populated 
until a
focus event. I've added an onFocus() to the suggestBox.textbox for this 
purpose. I'd
also tried this with the icon wrapper, but thought it might be affecting the 
icon
wrapper handlers (no keyup/keydown feedback).

Currently, there is no onFocus() for the iconwrapper. There is an onFocus() for 
the
suggestbox.textbox.

The sequence is:
1. suggestbox.focus event via mouseclick
2. (build the suggestion list), no visual feedback that the suggestion list 
exists
3. left mouseclick the icon, visual feedback that the suggestion list exists
4. try keydown/keyup - no joy
5. suggestbox.focus event via mouseclick
6. keyup/keydown - joy

Step #3 is why I want an onfocus event for the iconwrapper. IOW:

* onfocus 
  create the suggestion list
  if iconwrapper then
    display the entire suggestion list

* onkeypress
  display the entire or relevant subset of the suggestion list

Original comment by jchim...@gmail.com on 23 Apr 2009 at 10:37

GoogleCodeExporter commented 9 years ago
That's an interesting approach. I think it would be more conventional to write 
an 
Oracle that builds the list when the request for suggestions is made. If that 
list 
doesn't change afterwards, then the Oracle can simply cache it for later. Would 
that 
work for you?

Original comment by itruett on 24 Apr 2009 at 5:25

GoogleCodeExporter commented 9 years ago
I'm converting an existing Javascript app to GWT (for its AJAX, Oracle widget, 
and
cross-browser support). The original app triggering event was onfocus(), so the
current approach is "we've always done it that way..."

I'd played with the setDefaultSuggestions() method, but I could not figure out 
how to
call that w/o first hooking onFocus(). There's probably another way "... that 
builds
the list when the request for suggestions is made." I'd appreciate any guidance 
on
that issue.

Perhaps I should pause to describe the UI.

It's a horizontal grid of six key/value pairs by N rows. Data entry starts with 
the
leftmost key/value pair. The user can choose to start in the leftmost key cell 
or the
leftmost value cell.

Data entry in the key cell selects the exact data for the related value cell. 
Data
entry in the value cell selects the exact data for the related key cell.

Selection of this key/value pair chooses the set of available values for the 
next
key/value pair. Data entry proceeds to the right to that pair. As before, the 
user
can send onFocus() to the key cell or the value cell.

I hope you can appreciate why the Composite widget is so valuable. If the user
selects the "verbose" UI, they can start data entry in the leftmost value cell. 
A
keyDown event or iconWrapper() click event then displays the entire value list. 
The
advantage of the Oracle widget over the List widget is that while self-inserting
keystrokes in both widgets change the cursor's ordinal value, only in the Oracle
widget do these keystrokes reduce the set's cardinality.

Given this UI, I'd appreciate some guidance on how to construct a suggestion 
list
that does not rely on the onFocus() method. I hope that from my description you 
can
see that it's not possible to cache all the suggestion list key/value pairs (of
course, I could be wrong...). The suggestion list source is a JSON structure 
that's
retrieved during application startup.

Here is a sample data set for the leftmost key/value pair:
final String _items = "{"
        + "\"1\" : \"Roofing\""
        + ", \"2\" : \"Roof Vents and Stacks\""
        + ", \"3\" : \"Skylights\""
        + ", \"4\" : \"Antennae\""
        + ", \"31\" : \"Exterior Walls and Siding\""
        + "}";

Here is a sample data set for the next key/value pair:
final String _components = "{"
        + "\"1\" : "
        + "{"
        + "\"CF\" : \"Counter Flashing\""
        + ", \"CSH\" : \"Composition Shingle Roofing System\""
        + ", \"CTL\" : \"Clay Tile Roofing System\""
        + ", \"DE\" : \"Drip Edge\""
        + "}"
        + ", \"2\" : "
        + "{"
        + "\"CV\" : \"Cover\""
        + ", \"EL\" : \"electrical system\""
        + ", \"FL\": \"Flashing\""
        + "}"
        + ", \"3\" :"
        + "{"
        + "\"CM\": \"Curb Mounted Skylight\""
        + ", \"EL\": \"electrical system\""
        + ", \"FL\": \"Flashing\""
        + ", \"FP\": \"Flat Panel Skylight\""
        + "}"
        + ", \"4\" : "
        + "{"
        + "\"CB\": \"Cable\""
        + ", \"DG\": \"Digital Dish\""
        + ", \"EL\": \"electrical system\""
        + ", \"RD\": \"Radio\""
        + ", \"SD\": \"Satellite Dish\""
        + "}"
        + "}";

Original comment by jchim...@gmail.com on 24 Apr 2009 at 6:18

GoogleCodeExporter commented 9 years ago
If I understand your scenario correctly, I think all you need to do is move 
your 
onFocus() logic into your SuggestOracle implementation. Regarding the default 
suggestions, that's simply whatever suggestions you want to show when the user 
hasn't 
entered anything in the SuggestBox. In the context of the ComboBox widget, the 
default suggestions would be the entire list (or whatever subset can reasonably 
be 
accommodated in the UI).

Original comment by itruett on 5 May 2009 at 9:48