I have a form on a site with multiple text areas (maybe a dozen) for responses to different categories. To save vertical space, I use CSS to collapse the text areas to one row, and then when that text area receives focus it expands to 240px.
At the bottom of the page, when the user clicks the submit button, if one of the areas are ‘open’ then the loss of focus collapses the text area (as it should) and the submit button is not actioned.
You can press the submit button at the top of the page and it works every time. The button at the bottom of the page only works when the text area is collapsed, presumably because the text area is collapsed first, and then the click acts on the page and not the button that was in that position previously?
I have to admit being lazy, I have only tested this issue on Chrome for OSX.
I’m sure I could code a similar (and working) effect with jquery, but I wondered of there is a CSS only solution?
It’s definitely because of the transition, which starts to run on mousedown (on the submit button) and the button click fires on mouseup. So if between mousedown and mouseup the submit button moves from under the mouse it fails.