fix: select indicator click

alauda · Aug 22, 2023 · e2f61b3 · e2f61b3
1 parent fe9ef9e
commit e2f61b3
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 9 deletions.
diff --git a/src/i18n/language/en.ts b/src/i18n/language/en.ts
@@ -7,7 +7,7 @@ export const en: I18NInterface = {
     end_date: 'End Date',
     select_date: 'Select Date',
     select_time: 'Select time',
-    clear: 'clear',
+    clear: 'Clear',
     confirm: 'Confirm',
     to: 'To',
     year_suffix: '',

diff --git a/src/icon/icons.ts b/src/icon/icons.ts
diff --git a/src/input/input-group/input-group.component.scss b/src/input/input-group/input-group.component.scss
@@ -82,6 +82,11 @@
     left: calc(#{use-var(inline-padding-xs)} + 1px);
     transform: translateY(-50%);
     color: use-text-color(secondary);
+    pointer-events: none;
+
+    > * {
+      pointer-events: auto;
+    }
   }
 
   &__suffix {
@@ -90,6 +95,11 @@
     right: calc(#{use-var(inline-padding-xs)} + 1px);
     transform: translateY(-50%);
     color: use-text-color(secondary);
+    pointer-events: none;
+
+    > * {
+      pointer-events: auto;
+    }
   }
 
   &.hasAddonBefore {

diff --git a/src/theme/_mixin.scss b/src/theme/_mixin.scss
@@ -184,12 +184,21 @@
   &__icon-container {
     display: block;
     position: relative;
+    pointer-events: none !important;
+
+    .aui-icon {
+      margin: 0 !important;
+    }
   }
 
   &.isDisabled &__icon-container {
     color: use-rgb(n-4);
   }
 
+  &__indicator {
+    display: flex;
+  }
+
   &__clear {
     display: none;
 
@@ -205,6 +214,7 @@
 
     &__clear {
       display: flex;
+      pointer-events: auto;
     }
   }
 }

diff --git a/src/tooltip/base-tooltip.ts b/src/tooltip/base-tooltip.ts
@@ -359,7 +359,7 @@ export class BaseTooltip<T = any>
           this.renderer.listen(
             this.elRef.nativeElement,
             'click',
-            this.onClick.bind(this) as () => void,
+            this.onClick.bind(this),
           ),
         );
         break;
@@ -458,8 +458,9 @@ export class BaseTooltip<T = any>
     }
   }
 
-  protected onClick() {
+  protected onClick(event: Event) {
     this.toggleTooltip();
+    event.stopPropagation();
   }
 
   protected onBodyClick(event: Event) {

diff --git a/stories/select/basic.component.ts b/stories/select/basic.component.ts
@@ -1,6 +1,12 @@
+import { NgFor } from '@angular/common';
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { SelectModule } from 'src/select';
 
 @Component({
+  standalone: true,
+  imports: [SelectModule, FormsModule, NgFor],
   selector: 'story-select-basic',
   template: `
     <aui-select

diff --git a/stories/select/basic.stories.ts b/stories/select/basic.stories.ts
@@ -1,18 +1,14 @@
-import { FormsModule } from '@angular/forms';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
 
 import SelectBasicComponent from './basic.component';
 
-import { IconModule, SelectModule } from '@alauda/ui';
-
 const meta: Meta<SelectBasicComponent> = {
   title: 'Example/Select',
   component: SelectBasicComponent,
   decorators: [
     moduleMetadata({
-      declarations: [SelectBasicComponent],
-      imports: [FormsModule, SelectModule, IconModule, BrowserAnimationsModule],
+      imports: [BrowserAnimationsModule, SelectBasicComponent],
     }),
   ],
 };