Geb click executed before input is completed - grails

Question

I'm running a simple Geb test like so:
class IndexPage extends Page {
//static url = "http://localhost:8080/sampleGrailsApp"
static at = { title == "sampleGrailsApp" }
static content = {
signInButton { $("div", 0, class: "container-fluid").find("button", 0) }
modalFooterSignInButton(wait: true, to: MyPage) { $("footer", 0, class: "modal-footer").find("input", 0, class: "btn-primary") }
modalFooterUsernameInput { $("form").username = it }
modalFooterPasswordInput { $("form").password = it }
signIn { username, password ->
signInButton.click()
waitFor { modalFooterSignInButton.present }
modalFooterUsernameInput username
modalFooterPasswordInput password
modalFooterSignInButton.click()
}
}
}
In my test, the page is called as follows:
def "sigin"() {
given: "User is at index page"
at IndexPage
when: "User signs in"
signIn "username","password"
then: "Goes to MyPage"
at MyPage
}
On some occasions, the modalFooterSignInButton.click() happens before the username has been entered completely therefore failing the test. Has anyone encountered this before? How do I wait for input to complete first before click is activated? I'm using Geb 0.9.2.
Thanks in advance.

Answer 1

Try using isDisplayed() instead of present as present means is present in the code but isDisplayed() means it appears in the UI. Hope the following stuffs would solve your problem!
waitFor { modalFooterSignInButton.isDisplayed()}
Also, use waitFor{} in case of critical situations as I don't know anything about your app.

Answer 2

You could do something like :
waitFor { $(<username-input>).text().contains("username") } // after username is entered.
waitFor { $(<password-input>).text().contains("password") } // after password is entered.
before calling modalFooterSignInButton.click()
Also, is this behavior specific to any browser or it happens in all the browsers?