fix: remove select options padding to make it more clickable, fixes #391 (#397)

* fix: remove select options padding to make it more clickable, fixes #391

Author: ghiscoding

packages/multiple-select-vanilla/src/MultipleSelectInstance.ts

@@ -50,7 +50,7 @@ export class MultipleSelectInstance {
   protected selectAllElm?: HTMLInputElement | null;
   protected searchInputElm?: HTMLInputElement | null;
   protected selectGroupElms?: NodeListOf<HTMLInputElement>;
-  protected selectItemElms?: NodeListOf<HTMLInputElement>;
+  protected selectCheckboxElms?: NodeListOf<HTMLInputElement>;
   protected noResultsElm?: HTMLDivElement | null;
   protected options: MultipleSelectOption;
   protected selectAllName = '';
@@ -835,7 +835,7 @@ export class MultipleSelectInstance {
     this.selectGroupElms = this.dropElm?.querySelectorAll<HTMLInputElement>(
       `input[data-name="${this.selectGroupName}"],span[data-name="${this.selectGroupName}"]`,
     );
-    this.selectItemElms = this.dropElm?.querySelectorAll<HTMLInputElement>(`input[data-name="${this.selectItemName}"]:enabled`);
+    this.selectCheckboxElms = this.dropElm?.querySelectorAll<HTMLInputElement>(`input[data-name="${this.selectItemName}"]:enabled`);
     this.noResultsElm = this.dropElm?.querySelector<HTMLDivElement>('.ms-no-results');
 
     const toggleOpen = (e: MouseEvent & { target: HTMLElement }) => {
@@ -922,7 +922,7 @@ export class MultipleSelectInstance {
           if (this.options.filterAcceptOnEnter && ['Enter', 'Space'].includes(e.code) && this.searchInputElm?.value) {
             if (this.options.single) {
               const visibleLiElms: HTMLInputElement[] = [];
-              this.selectItemElms?.forEach(selectedElm => {
+              this.selectCheckboxElms?.forEach(selectedElm => {
                 if (selectedElm.closest('li')?.style.display !== 'none') {
                   visibleLiElms.push(selectedElm);
                 }
@@ -1006,9 +1006,9 @@ export class MultipleSelectInstance {
       );
     }
 
-    if (this.selectItemElms) {
+    if (this.selectCheckboxElms) {
       this._bindEventService.bind(
-        this.selectItemElms,
+        this.selectCheckboxElms,
         'click',
         ((e: MouseEvent & { currentTarget: HTMLInputElement }) => {
           const selectElm = e.currentTarget;

packages/multiple-select-vanilla/src/styles/_variables.scss

@@ -63,7 +63,7 @@ $ms-drop-padding: 0 !default;
 $ms-drop-list-item-align-items: center !default;
 $ms-drop-list-item-display: flex !default;
 $ms-drop-list-item-level1-padding-left: 8px !default;
-$ms-drop-list-item-padding: 0.25rem 8px !default;
+$ms-drop-list-item-padding: 0 !default;
 $ms-drop-list-item-disabled-filter: Alpha(Opacity = 35) !default;
 $ms-drop-list-item-disabled-opacity: 0.35 !default;
 $ms-drop-scrollbar-color: #c1c1c1 #f1f1f1 !default;
@@ -73,7 +73,7 @@ $ms-infinite-empty-option-height: 20px !default;
 $ms-label-column-gap: 0 !default;
 $ms-label-margin-bottom: 0 !default;
 $ms-label-min-height: 1.25rem !default;
-$ms-label-padding: 0 0 0 2px !default;
+$ms-label-padding: 0.25rem 8px !default;
 $ms-label-text-padding-left: 8px !default;
 $ms-loading-gap: 4px !default;
 $ms-loading-icon-size: 1.15em !default;

playwright/e2e/example03.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 
 test.describe('Example 03 - Multiple Width', () => {
   test('each item should be around 44px wide and expect item selected to show in select parent element', async ({ page }) => {
@@ -9,7 +9,7 @@ test.describe('Example 03 - Multiple Width', () => {
     await page.getByRole('option', { name: '15' }).click();
     let elm16 = await page.locator('label').filter({ hasText: '16' });
     await elm16.click();
-    expect((await elm16!.boundingBox())!.width).toBe(54);
+    expect((await elm16!.boundingBox())!.width).toBe(70);
 
     elm16 = await page.locator('div[data-test=select1] .ms-drop li:nth-of-type(16)');
     await elm16.focus();

playwright/e2e/options30.spec.ts

@@ -1,6 +1,6 @@
-import { test, expect, type Page } from '@playwright/test';
+import { expect, type Page, test } from '@playwright/test';
 
-async function assertDropSize(page: Page, selector: string, type: 'height' | 'width', expectation: number, range = 15) {
+async function assertDropSize(page: Page, selector: string, type: 'height' | 'width', expectation: number, range = 20) {
   const dropElm1 = await page.locator(selector);
   const elmSize = (await dropElm1?.boundingBox())![type];
   expect(elmSize).toBeGreaterThanOrEqual(expectation - range);