fix: implement proper handling of Tab inside the textarea

stackblitz · Feb 16, 2025 · a7c3d17 · a7c3d17
1 parent eda10b1
commit a7c3d17
Showing 1 changed file with 11 additions and 0 deletions.
diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx
@@ -112,6 +112,17 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                     ref={textareaRef}
                     className={`w-full pl-4 pt-4 pr-16 focus:outline-none resize-none text-md text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary bg-transparent`}
                     onKeyDown={(event) => {
+                      if (event.key === 'Tab') {
+                        event.preventDefault();
+                        const idx = event.target.selectionStart;
+                        if (idx !== null) {
+                          const start = event.target.value.substring(0, idx);
+                          const back = event.target.value.substring(idx);
+                          event.target.value = `${start}    ${back}`;
+                          event.target.setSelectionRange(idx + 4, idx + 4);
+                        }
+                        return;
+                      }
                       if (event.key === 'Enter') {
                         if (event.shiftKey) {
                           return;