tv.ui.button Only responds to mouseclick on pageload

Question

This tv.ui.button only responds to mouseclick when initially loaded, but then responds to keyboard ENTER or mouseclick after it's been clicked at least once. Do I have something wrong here?

HTML

<div class="tv-button alert-button" id="test-button">Alert button</div>

JS

decorateHandler.addClassHandler('alert-button', function(button) {
goog.events.listen(button, tv.ui.Button.EventType.ACTION,
      function() {
        alert('Button clicked.');
        var elementToFocus = goog.dom.getElement('tab1');
        var componentToFocus = tv.ui.getComponentByElement(elementToFocus);
        tv.ui.Document.getInstance().setFocusedComponent(componentToFocus);;
      });
});

EDIT: it seems this may be a question about javascript, not closure specifically. I'm posting a new question under the appropriate tag

score 1 · Accepted Answer · answered Jan 03 '13 at 23:53

1

Have you made sure that the button has cursor focus? If not then the "Enter" key event will get handed to the default handler.

answered Jan 03 '13 at 23:53

Krispy

1,098
1
7
11

I'm not sure. How is cursor focus defined? – ejfrancis Jan 04 '13 at 14:33
Have a look at this StackOverflow answer: http://stackoverflow.com/questions/148361/how-can-i-give-keyboard-focus-to-a-div-and-attach-keyboard-event-handlers-to-it – Krispy Jan 04 '13 at 16:20
I added tabindex=0 like so
Alert button
still no luck, it responds to keyboard only after being clicked at least once – ejfrancis Jan 04 '13 at 18:10
Also, I just tried adding more than one button and it seems that it's not this particular element that's the problem. No tv-buttons work on the page until at least one has been clicked, then all of them work with the keyboard event – ejfrancis Jan 04 '13 at 18:20
can you try adding this to the bottom of your html – Krispy Jan 04 '13 at 22:43
a college just pointed out that you are trying to set focus on 'tab1' when you should in fact try to set focus on 'test-button' - change the code snippet you provided in your code and let me know. – Krispy Jan 04 '13 at 22:45
The setting focus to tab1 was just to reset the focus to the first item on the page after the button is clicked, but I changed it anyway. I also tried adding your focus script at the end of the page, still nothing. What exactly changes when a mouse click event is registered on a button, with respect to the focus? – ejfrancis Jan 04 '13 at 23:25
When an element which is focus-able is clicked by a pointer (mouse in this case) then it gains focus (see http://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus), Now in your case I am only able to guess at whats happening but you may want to try finding out what has the default focus on your page - you can use this method (http://www.meeho.net/blog/2010/01/find-out-which-html-element-has-focus-using-javascript/) to discover what may be stealing focus away. – Krispy Jan 06 '13 at 00:33
Well, I fixed it with a semi hack. i used a $('target').click on $(document).ready, which seems to set the focus as if a click event had actually happened. I'm not incredibly happy about it, but it works – ejfrancis Jan 07 '13 at 21:59

score 0 · Answer 2 · answered Jan 07 '13 at 22:00

0

Well, I fixed it with a semi hack. i used a $('target').click on the button within $(document).ready, which seems to set the focus as if a click event had actually happened

answered Jan 07 '13 at 22:00

ejfrancis

2,925
4
26
42

tv.ui.button Only responds to mouseclick on pageload

2 Answers2