Merge pull request #1037 from Infineon/1023-multi-select-implement-a-…

…show-search-prop Multiselect: implemented search-enabled prop
Infineon · Mar 8, 2024 · e45cc80 · e45cc80
2 parents d04e50e + ff41904
commit e45cc80
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 16 deletions.
diff --git a/packages/components-vue/lib/components.ts b/packages/components-vue/lib/components.ts
@@ -260,6 +260,7 @@ export const IfxMultiselect = /*@__PURE__*/ defineContainer<JSX.IfxMultiselect>(
   'label',
   'placeholder',
   'maxItemCount',
+  'searchEnabled',
   'ifxSelect',
   'ifxMultiselectIsOpen'
 ]);

diff --git a/packages/components/src/components/select/multi-select/multiselect.stories.ts b/packages/components/src/components/select/multi-select/multiselect.stories.ts
@@ -36,13 +36,12 @@ export default {
     size: "m",
     batchSize: 10,
     maxItemCount: 10,
+    searchEnabled: true,
     error: false,
     errorMessage: 'Some error',
     label: '',
     disabled: false,
     placeholder: 'Placeholder'
-
-
   },
   argTypes: {
     size: {
@@ -72,6 +71,11 @@ export default {
       options: [true, false],
       control: { type: 'radio' },
     },
+    searchEnabled: {
+      name: 'Enable search',
+      options: [true, false],
+      control: { type: 'radio' }
+    },
     error: {
       name: 'Error',
       options: [true, false],
@@ -117,7 +121,8 @@ const DefaultTemplate = (args) => {
   error-message='${args.errorMessage}'
   label='${args.label}'
   placeholder='${args.placeholder}'
-  disabled='${args.disabled}'>
+  disabled='${args.disabled}'
+  search-enabled='${args.searchEnabled}'>
 </ifx-multiselect>`;
 
   setTimeout(() => {

diff --git a/packages/components/src/components/select/multi-select/multiselect.tsx b/packages/components/src/components/select/multi-select/multiselect.tsx
@@ -44,7 +44,7 @@ export class Multiselect {
   @State() isLoading: boolean = false;
   @State() loadedOptions: Option[] = [];
   @State() filteredOptions: Option[] = [];
-
+  @Prop() searchEnabled: boolean = true
 
 
   @Event() ifxSelect: EventEmitter;
@@ -488,7 +488,7 @@ export class Multiselect {
             <div class="ifx-multiselect-dropdown-menu"
               onScroll={(event) => this.handleScroll(event)}
               style={{ '--dynamic-z-index': this.zIndex.toString() }}>
-              <input type="text" role="textbox" class="search-input" onInput={(event) => this.handleSearch(event.target)} placeholder="Search..."></input>
+              {this.searchEnabled && <input type="text" role="textbox" class="search-input" onInput={(event) => this.handleSearch(event.target)} placeholder="Search..."></input>}
               {this.filteredOptions.map((option, index) => this.renderOption(option, index))}
               {this.isLoading && <div>Loading more options...</div>}
             </div>

diff --git a/packages/components/src/components/select/multi-select/readme.md b/packages/components/src/components/select/multi-select/readme.md
@@ -7,17 +7,18 @@
 
 ## Properties
 
-| Property       | Attribute        | Description | Type              | Default           |
-| -------------- | ---------------- | ----------- | ----------------- | ----------------- |
-| `batchSize`    | `batch-size`     |             | `number`          | `50`              |
-| `disabled`     | `disabled`       |             | `boolean`         | `false`           |
-| `error`        | `error`          |             | `boolean`         | `false`           |
-| `errorMessage` | `error-message`  |             | `string`          | `"Error"`         |
-| `label`        | `label`          |             | `string`          | `""`              |
-| `maxItemCount` | `max-item-count` |             | `number`          | `undefined`       |
-| `options`      | `options`        |             | `any[] \| string` | `undefined`       |
-| `placeholder`  | `placeholder`    |             | `string`          | `""`              |
-| `size`         | `size`           |             | `string`          | `'medium (40px)'` |
+| Property        | Attribute        | Description | Type              | Default           |
+| --------------- | ---------------- | ----------- | ----------------- | ----------------- |
+| `batchSize`     | `batch-size`     |             | `number`          | `50`              |
+| `disabled`      | `disabled`       |             | `boolean`         | `false`           |
+| `error`         | `error`          |             | `boolean`         | `false`           |
+| `errorMessage`  | `error-message`  |             | `string`          | `"Error"`         |
+| `label`         | `label`          |             | `string`          | `""`              |
+| `maxItemCount`  | `max-item-count` |             | `number`          | `undefined`       |
+| `options`       | `options`        |             | `any[] \| string` | `undefined`       |
+| `placeholder`   | `placeholder`    |             | `string`          | `""`              |
+| `searchEnabled` | `search-enabled` |             | `boolean`         | `true`            |
+| `size`          | `size`           |             | `string`          | `'medium (40px)'` |
 
 
 ## Events