TIL - Keyboard Event isComposing

Dạo gần đây, thời tiết Hà Nội ẩm ương hết sức. Cứ một hai hôm nắng, lại một hai hôm mưa thành ra người uể oải điên. Đang ngồi vui vui ngồi code chiếc AI Chat UI thì nhận được quả bug rất dị. Bằng một cách thần kì nào đó, khi mà nhấn Enter để chat trên UI thì sẽ bị gửi hai lần. Vâng, đang uể oải bỗng như bừng tỉnh. Mặc dù biết quả bug khá thú vị nhưng mình không "narrow down" (ê tiếng Việt cái cụm này là gì?) được tại sao nó lại bị thế. Thế là lại uể oải tập 2 🫠

Ok, gác feature mới lại. Đi bắt bug nào!

Sau khi thử vài quả prompt trên trời dưới biển kiểu: "Test, Thử cái coi, v.v..." thì lúc bị lúc không. Debug sợ nhất chắc là quả lúc bị lúc không 🥹 Xong mình để ý là cứ đang gõ tiếng Việt mà gửi thì bị lỗi. Quay ra bảo sếp:

• Em chưa biết tại sao nhưng cứ gõ tiếng Việt là bị anh ạ :v

• Làm đ… gì có chuyện đấy 🤣

• 🥹 Vâng, chắc là trùng hợp thôi

Xong mình thử lại, thì đúng là cứ gõ tiếng Việt thì bị thật 🤣 Xong thử qua thấy mỗi Safari là không bị. Ma-dích vãi!

Hai anh em hoang mang không biết fix sao thì mình lọ mọ đi ngâm cứu trên mạng có ông nào từng bị chưa. Lớ ngớ thế nào lại bắt được một bài viết của anh Hàn Quốc lạ mặt trên Internet. Về cơ bản là mấy ngôn ngữ kiểu: Trung, Nhật, Hàn, Việt, v.v… lúc gõ chữ sẽ có một cái trạng thái là isComposing . Và khi mà đang "còm-pâu-dinh" đấy mà mà quất Enter thì onKeyDown sẽ "cháy luôn 2 lần" (fired twice 🤣).

Fix?

onKeyDown={(event) => {
  if (event.nativeEvent.isComposing) {
    return
  }
  // handle keydown here 😘
}} 

Thật sự là sau khi tìm ra quả bug này xong thì đúng là bừng tỉnh 👯