Clicking element once gives error, clicking it twice works fine, why? (Protractor) - selenium

Question

I'm running end-to-end tests on a website with Protractor, and one of the elements is having a strange behavior. When I first tried specifying the code to click the element once, I got the following error.
Problematic function:
fooField = element(by.css('#inputFoo'));
foosList = $$('[type=radio]');
async chooseFoo(id: number) {
const foo = this.foosList.get(id - 1);
// await browser.sleep(2000);
// await this.fooField.click();
await this.fooField.click();
await browser.sleep(this.sleepTime);
await foo.click();
await this.selectFooButton.click();
}
Error:
**************************************************
* Failures *
**************************************************
1) reimbursement request page should allow a user to register a request
- Failed: element not interactable
(Session info: chrome=72.0.3626.81)
(Driver info: chromedriver=2.46.628388 (4a34a70827ac54148e092aafb70504c4ea7ae926),platform=Linux 4.15.0-45-generic x86_64)
Executed 2 of 2 specs (1 FAILED) in 28 secs.
[16:50:44] I/launcher - 0 instance(s) of WebDriver still running
[16:50:44] I/launcher - chrome #01 failed 1 test(s)
[16:50:44] I/launcher - overall: 1 failed spec(s)
[16:50:44] E/launcher - Process exited with error code 1
An unexpected error occurred: undefined
After changing the code to click on the element twice in a row, and changing nothing else, the code ran successfully. I also tried removing the redundant click and adding a sleep right before the click, but I still got the same error. Why is this happening?

Answer 1

Not sure which element you're trying to click, but this way of clicking has helped me when having similar problems:
browser.executeScript('arguments[0].click()', elementToClick);

Answer 2

let fooField = element(by.css('#inputFoo'));
await browser.wait(ExpectedConditions.elementToBeClickable(fooField), 5000, 'Element is not clickable.');
await fooField.click();
If the element is not clickable after the certain time will throw error, there is a problem with the button. Something is blocking it, to be clicked.
Another way to bypass it (not the best way) is using javascript click.
let fooField = element(by.css('#inputFoo'));
browser.executeScript('arguments[0].scrollIntoView(true); arguments[0].click();', fooField);