Stuck at await When Sending Transactions

Question

I'm writing an Angular web app that communicates with the Ethereum network. In the app, I have the following method:

async onSubmit() {
    const accounts = await this.web3.eth.getAccounts();
 
    this.message = 'Waiting on transaction success...';
 
    await this._lottery.methods.enter().send({
      from: accounts[0],
      value: this.web3.utils.toWei(this.value, 'ether')
    });
 
    this.message = 'You have been entered!';
}

The method is fired on a form submission event. The state of the contract gets updated upon the call of this method, but it's kinda stuck at the await line and does not move to the following lines once it gets back.

Interestingly enough, I don't face this problem when reading from the network, i.e., call instead of send.

P.S. I'm using web3 v1.0.0 with Rinkeby network.

Answer 1

It turned out the the issue comes from the Metamask chrome extension. Rolling back the Metamask extension to v4.11 seems to solve this problem.