[fix](@svelteui/core): fix no pointer events in Input right section

ISSUES CLOSED: #446
svelteuidev · Aug 21, 2023 · bab15a5 · bab15a5
1 parent cba20e2
commit bab15a5
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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}