fix(TextArea): adjust styling for clear icon

src/components/forms/text-area/RuiTextArea.spec.ts

@@ -232,4 +232,32 @@ describe('forms/TextArea', () => {
 
     expect((wrapper.find('textarea:not([aria-hidden="true"])').element as HTMLTextAreaElement).value).toBe(text);
   });
+
+  it('clearable', async () => {
+    const text = 'test text';
+    const wrapper = createWrapper({
+      props: {
+        clearable: true,
+        modelValue: text,
+      },
+    });
+
+    expect(wrapper.find('.clear-btn').exists()).toBeTruthy();
+
+    expect(wrapper.find('textarea').element.value).toBe(text);
+    await wrapper.find('.clear-btn').trigger('click');
+    expect(wrapper.find('textarea').element.value).toBe('');
+    await nextTick();
+
+    // Clear button not rendered if value is empty
+    expect(wrapper.find('.clear-btn').exists()).toBeFalsy();
+
+    // Clear button not rendered if the textarea is disabled
+    await wrapper.setProps({ disabled: true });
+    expect(wrapper.find('.clear-btn').exists()).toBeFalsy();
+
+    // Clear button not rendered if the textarea is readonly
+    await wrapper.setProps({ disabled: false, readonly: true });
+    expect(wrapper.find('.clear-btn').exists()).toBeFalsy();
+  });
 });

src/components/forms/text-area/RuiTextArea.vue

@@ -81,7 +81,6 @@ const prepend = ref<HTMLDivElement>();
 const append = ref<HTMLDivElement>();
 const textarea = ref<HTMLTextAreaElement>();
 const textareaSizer = ref<HTMLTextAreaElement>();
-const focusedDebounced = ref(false);
 
 const css = useCssModule();
 const attrs = useAttrs();
@@ -165,14 +164,7 @@ function computeFieldHeight(newVal?: string, oldVal?: string) {
 }
 
 const { focused } = useFocus(textarea);
-
-watchDebounced(
-  focused,
-  (focused) => {
-    set(focusedDebounced, focused);
-  },
-  { debounce: 500 },
-);
+const focusedDebounced = refDebounced(focused, 500);
 
 watch(modelValue, computeFieldHeight);
 onMounted(computeFieldHeight);
@@ -255,9 +247,10 @@ onMounted(computeFieldHeight);
           variant="text"
           type="button"
           icon
-          class="!p-2"
-          :color="color"
-          @click="clearIconClicked()"
+          class="!p-2 clear-btn"
+          color="error"
+          tabindex="-1"
+          @click.stop="clearIconClicked()"
         >
           <RuiIcon
             name="close-line"