Update: Apparently this is part of the accessibility scheme of Flex Spark Components
Button control Press the Spacebar to activate the Button control. To cancel activating a button, press the Tab key to move the focus off the Button control before releasing the Spacebar.
I guess it can be turned off through compiler directives: Accessibility best practices
Question: Is there any reason a Spark Button would trap key events, in particular a "spacebar" key event?
Background: I've inherited and am maintaining a large legacy project done in Flex 4.6. I am seeing a weird behavior with a Spark Button. Essentially, once the button has been clicked on (i.e. given focus) a keyEvent (spaceBar) will trigger the click event handler attached to the button.
Weird, right?
The button is defined in MXML (below) within an MX:Module. The module has key event listeners attached to the stage but the event handlers for those do nothing with the button:
this.stage.addEventListener(KeyboardEvent.KEY_DOWN, echoKeyDownHandler);
this.stage.addEventListener(KeyboardEvent.KEY_UP, echoKeyUpHandler);
If I put a trace statement in the button's event handler to check the event type when this weird behavior occurs, the type is reported as a click. I don't see anything in the docs for the Spark Button about capturing key events like this.
<s:Button id="toggleBtn"
label="Editor"
click="toggleBtn_clickHandler(event)"
x="943" y="8"/>
This is quite normal with Flex. You should also be able to navigate through the interactive elements by using the <tab> key. <space> usually acts like a click. You could try to avoid this by either
a) set the focus to another object after pressing the button
or
b) by checking the keyboardPressed property.
Both is a bit hacky imho. I am not sure if it is possible to turn of keyboard navigation completely in Flex.
[edit 1] I am just thinking if it wouldn't help to simply overwrite the default keyboard handler like this:
override protected function keyDownHandler(evt:KeyboardEvent):void {}
this is inherited by UIComponent. and you would need to create an own component extending s:Button. A little drawback...
[edit 2] I wasn't able to stop thinking about that, even I stopped using Flex 2-3 years ago. So I googled a bit and found this stack overflow post: How to disable default browser navigation with Space in Flex