From bab15a5a58fabbce82f330315cfd74a2f9c9a180 Mon Sep 17 00:00:00 2001
From: Ana Margarida <ams-amargarida@hotmail.com>
Date: Mon, 21 Aug 2023 13:04:06 +0100
Subject: [PATCH] [fix](@svelteui/core): fix no pointer events in Input right
 section

ISSUES CLOSED: #446
---
 .../src/components/Input/Input.stories.svelte            | 9 +++++++++
 .../svelteui-core/src/components/Input/Input.styles.ts   | 4 +++-
 packages/svelteui-core/src/components/Input/Input.svelte | 8 +++++++-
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/packages/svelteui-core/src/components/Input/Input.stories.svelte b/packages/svelteui-core/src/components/Input/Input.stories.svelte
index 08f92ec2..f371523d 100644
--- a/packages/svelteui-core/src/components/Input/Input.stories.svelte
+++ b/packages/svelteui-core/src/components/Input/Input.stories.svelte
@@ -2,6 +2,7 @@
 	import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
 	import { Input } from './index';
 	import { EnvelopeClosed } from 'radix-icons-svelte';
+	import { Button } from '../Button';
 
 	let value = 'Hello';
 	let valueNumber = 0;
@@ -38,3 +39,11 @@
 		</svelte:fragment>
 	</Input>
 </Story>
+
+<Story name="With right section" id="inputRightSectionStory">
+	<Input bind:value>
+		<svelte:fragment slot="rightSection">
+			<Button on:click={() => console.log('heelo')} />
+		</svelte:fragment>
+	</Input>
+</Story>
diff --git a/packages/svelteui-core/src/components/Input/Input.styles.ts b/packages/svelteui-core/src/components/Input/Input.styles.ts
index e32e81fc..8cb5464e 100644
--- a/packages/svelteui-core/src/components/Input/Input.styles.ts
+++ b/packages/svelteui-core/src/components/Input/Input.styles.ts
@@ -236,8 +236,10 @@ export default createStyles(
 				display: 'flex',
 				alignItems: 'center',
 				justifyContent: 'center',
-				pointerEvents: 'none',
 				width: rightSectionWidth
+			},
+			noPointerEvents: {
+				pointerEvents: 'none'
 			}
 		};
 	}
diff --git a/packages/svelteui-core/src/components/Input/Input.svelte b/packages/svelteui-core/src/components/Input/Input.svelte
index 67164d27..21a92043 100644
--- a/packages/svelteui-core/src/components/Input/Input.svelte
+++ b/packages/svelteui-core/src/components/Input/Input.svelte
@@ -47,6 +47,9 @@
 	function isInput(root: string): root is Input {
 		return ['input', 'select', 'textarea', 'datalist'].includes(root);
 	}
+	function isSelect(root: string): boolean {
+		return root === 'select';
+	}
 	let isHTMLElement = true;
 	let isComponent = false;
 
@@ -226,7 +229,10 @@ Base component to create custom inputs
 		</div>
 	{/if}
 	{#if showRightSection}
-		<div {...rightSectionProps} class={classes.rightSection}>
+		<div
+			{...rightSectionProps}
+			class={cx(classes.rightSection, { [classes.noPointerEvents]: isSelect(root) })}
+		>
 			<slot name="rightSection" />
 		</div>
 	{/if}