[BUGFIX] Empêcher la propagation des événements dans tous les enfants…

… sur la Tooltip (PIX-6149)
1024pix · Oct 28, 2022 · caf2a7d · caf2a7d
2 parents 215290b + 1ad198a
commit caf2a7d
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 7 deletions.
diff --git a/addon/components/pix-tooltip.hbs b/addon/components/pix-tooltip.hbs
@@ -2,13 +2,15 @@
   class="pix-tooltip"
   {{on-escape-action this.hideTooltip}}
   {{on "mouseover" this.showTooltip}}
-  {{on "mouseout" this.hideTooltipOnMouseOut}}
+  {{on "mouseleave" this.hideTooltipOnMouseOut}}
   {{on "focusin" this.showTooltip}}
   {{on "focusout" this.hideTooltip}}
   ...attributes
 >
   {{#if (has-block "triggerElement")}}
-    {{yield to="triggerElement"}}
+    <div class={{if this.isVisible "pix-tooltip--visible" ""}}>
+      {{yield to="triggerElement"}}
+    </div>
   {{/if}}
 
   {{#if (has-block "tooltip")}}

diff --git a/addon/components/pix-tooltip.js b/addon/components/pix-tooltip.js
@@ -1,7 +1,10 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 
 export default class PixTooltip extends Component {
+  @tracked isVisible = false;
+
   get position() {
     const correctsPosition = [
       'top',
@@ -21,18 +24,18 @@ export default class PixTooltip extends Component {
   }
 
   @action
-  showTooltip(event) {
-    event.target.classList.add('pix-tooltip--visible');
+  showTooltip() {
+    this.isVisible = true;
   }
 
   @action
-  hideTooltip(event) {
-    event.target.classList.remove('pix-tooltip--visible');
+  hideTooltip() {
+    this.isVisible = false;
   }
 
   @action
   hideTooltipOnMouseOut(event) {
-    const isFocused = document.activeElement === event.target;
+    const isFocused = event.target.contains(document.activeElement);
 
     if (isFocused) {
       return;

diff --git a/addon/styles/_pix-tooltip.scss b/addon/styles/_pix-tooltip.scss
@@ -5,6 +5,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
+
 }
 
 .pix-tooltip--visible {

diff --git a/app/stories/pix-tooltip.stories.js b/app/stories/pix-tooltip.stories.js
@@ -46,6 +46,27 @@ const TemplateWithHTMLElement = (args) => {
   };
 };
 
+const TemplateWithIconElement = (args) => {
+  return {
+    template: hbs`
+      <PixTooltip
+        @id={{this.id}}
+        @isInline=true>
+        <:triggerElement>
+          <button style='padding:0; margin-left:4px; line-height:0;'>
+            <FaIcon class="external-link" @icon="up-right-from-square" />
+          </button>
+        </:triggerElement>
+
+        <:tooltip>
+         {{this.text}}
+        </:tooltip>
+      </PixTooltip>
+    `,
+    context: args,
+  };
+};
+
 export const Default = Template.bind({});
 Default.args = {
   text: 'Hello World',
@@ -113,6 +134,12 @@ WithHTML.args = {
   label: 'À survoler pour voir la tooltip',
 };
 
+export const WithIcon = TemplateWithIconElement.bind({});
+Default.args = {
+  text: 'Hello World',
+  label: 'À survoler pour voir la tooltip',
+};
+
 export const argTypes = {
   id: {
     name: 'id',

diff --git a/app/stories/pix-tooltip.stories.mdx b/app/stories/pix-tooltip.stories.mdx
@@ -75,6 +75,7 @@ Infobulle en position `top`, fond sombre (par défaut).
 
 <Canvas>
   <Story name="Default" story={stories.Default} height={200} />
+  <Story name="WithIcon" story={stories.WithIcon} height={200} />
 </Canvas>
 
 ## Is Light