Merge pull request #346 from otto-de/BLA-626

fix(input-list): [BLA-626] fixes input list with text bug

Author: chinmay-jaiswal

packages/core-components/src/components/input-list/input-list.e2e.tsx

@@ -35,16 +35,32 @@ describe('B2B-InputList', () => {
     expect(inputValue).toBe('8');
   });
 
-  it('should not receive input text when disabled', async () => {
+  it('should not receive input text when disabled & should not show close icon', async () => {
     const inputList = await page.find('b2b-input-list');
-
     inputList.setAttribute('disabled', true);
     await page.waitForChanges();
 
     await typeInput();
 
     let inputValue = inputList.getAttribute('value');
     expect(inputValue).toBe(null);
+    const closeIcon = await page.find('b2b-input-list >>> b2b-icon');
+    expect(closeIcon).toBeNull();
+  });
+
+  it('should not not show close icon when input list has text and is disabled', async () => {
+    await typeInput('b');
+    await typeInput('2');
+    await typeInput('b');
+    const inputList = await page.find('b2b-input-list');
+
+    inputList.setAttribute('disabled', true);
+    await page.waitForChanges();
+
+    let inputValue = inputList.getAttribute('value');
+    expect(inputValue).toBe('b2b');
+    const closeIcon = await page.find('b2b-input-list >>> b2b-icon');
+    expect(closeIcon).toBeNull();
   });
 
   it('should not show search list when input is not focused', async () => {

packages/core-components/src/components/input-list/input-list.stories.tsx

@@ -48,21 +48,50 @@ export const Focused: Story = {
   },
 };
 
-export const Disabled: Story = {
+export const CustomList: Story = {
+  args: {
+    ...meta.args,
+  },
+  render: ({ ...args }) => html`<div style="height: 130px; width: 300px">
+    <b2b-input-list
+      data-testid="element"
+      label="${args.label}"
+      required="${args.required}"
+      placeholder="${args.placeholder}"
+      disabled="${args.disabled}"
+      .optionsList=${args.optionsList}
+      ><ul>
+        <li>Option 1</li>
+        <li>
+          Option 2
+          <ul>
+            <li>Option 2.1</li>
+            <li>Option 2.2</li>
+          </ul>
+        </li>
+        <li>Option 3</li>
+      </ul></b2b-input-list
+    >
+  </div>`,
+};
+
+export const DisabledWithoutSelectedOption: Story = {
   args: {
     ...meta.args,
     disabled: true,
   },
 };
 
-export const CustomList: Story = {
+export const disabledWithSelectedOption: Story = {
   args: {
     ...meta.args,
+    disabled: true,
   },
   render: ({ ...args }) => html`<div style="height: 130px; width: 300px">
     <b2b-input-list
       data-testid="element"
       label="${args.label}"
+      value="${args.optionsList[0]}"
       required="${args.required}"
       placeholder="${args.placeholder}"
       disabled="${args.disabled}"

packages/core-components/src/components/input-list/input-list.tsx

@@ -222,7 +222,7 @@ export class InputListComponent {
             onb2b-input={this.handleInput}
             placeholder={this.placeholder}
             required={this.required}>
-            {Boolean(this.value) && (
+            {!(this.disabled || this.groupDisabled) && Boolean(this.value) && (
               <b2b-icon
                 icon="b2b_icon-close"
                 aria-label="reset"