Accordion Focus lost

Question

I have an accordion that has a background graphic for the top
of the tab when a tab is open. when it is closed (i.e. at the
bottom of the stack) it has a standard background color. the code
is below for the CSS. this is pretty standard for the accordion.
What I need to have happen is when the accordion slides a tab down
(from user clicking) the lowered tab top needs to switch to it's
inactive state. This only happens when a user clicks outside of the
Spry Accordion region. Seems to be a problem with IE / Firefox
(both Mac and PC) but not in Safari.
Any suggestions? Thanks!
.Accordion {
border-bottom: solid 1px #CCCCCC;
background-image:url(imx/boxtop.gif);
background-repeat: no-repeat;
overflow: hidden;
width: 336px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
margin: 0px;
padding: 0px;
background-color: #CCCCCC;
outline: none;
.AccordionPanel {
margin: 0px;
padding: 0px;
.AccordionPanelTab {
height: 18px;
margin: 0px;
padding: 1px 1px 3px 1px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
border-bottom:1px solid #cccccc;
.AccordionPanelContent {
overflow: auto;
margin: 0px;
padding: 0px;
background-color: #FFFFFF;
border-left: solid 1px #CCCCCC;
border-right: solid 1px #CCCCCC;
width: 336px;
html>body .AccordionPanelContent {
overflow: auto;
margin: 0px;
padding: 0px;
background-color: #FFFFFF;
border-left: solid 1px #CCCCCC;
border-right: solid 1px #CCCCCC;
width: 334px;
.AccordionPanelOpen .AccordionPanelTab {
background-image:url(imx/boxtop.gif);
background-repeat: no-repeat;
.AccordionPanelTabHover {
color: #555555;
.AccordionPanelOpen .AccordionPanelTabHover {
color: #555555;
.AccordionFocused .AccordionPanelTab {
background-image:url(imx/boxtop.gif);
background-repeat: no-repeat;
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
background-color: #CCCCCC;
}

Answer 1

Please also remember that the <i>onEnter</i> event being discussed here is not the same onEnter event that many are familiar with from the JavaScript world.
The JavaScript <i>onEnter</i> is purely a client-side event and refers to the user entering an input field with his or her cursor, not necessarily data entry.
The Web Dynpro <i>onEnter</i> requires a client-server round trip (since this event is handled on the server). It does not have to do with client-side UI navigation or gaining and losing focus on the client. This refers to actual data entry, i.e. the "Enter" the event is refering to is the enter key, or submit.
Having said that - there is no event on a text input field when you give it focus (or take it away) on the client. However, there is an <i>onEnter </i>(on the server!) in a drop-down entry, for instance, when an item is selected. This can be used to populate other fields when a drop-down selection is made. I assume the same is true for radio selections and similar, but I'm not entirely certain.
There are a few other threads on this subject as well.
Boris