fix(builder): clear single-select record selector + truncate dropdown… (baserow#5303)

* fix(builder): clear single-select record selector + truncate dropdown labels

* add changelog

* please linter

* Also allo to unselect choice elements

---------

Co-authored-by: Jeremie Pardou <571533+jrmi@users.noreply.github.com>

Author: jonadeline

changelog/entries/unreleased/feature/3719_clear_singleselect_record_selector.json

@@ -0,0 +1,9 @@
+{
+    "type": "feature",
+    "message": "clear single-select record selector",
+    "issue_origin": "github",
+    "issue_number": 3719,
+    "domain": "builder",
+    "bullet_points": [],
+    "created_at": "2026-05-05"
+}

web-frontend/modules/builder/components/elements/baseComponents/ABDropdownItem.vue

@@ -2,6 +2,7 @@
   <li
     class="ab-dropdownitem__item ab-dropdownitem__item--no-options"
     :class="{
+      'ab-dropdownitem__item--single': !multiple.value,
       hidden: !isVisible(query),
       active: isActive(value),
       disabled: disabled,
@@ -15,7 +16,7 @@
       @mousemove="hover(value, disabled)"
     >
       <div class="ab-dropdownitem__item-name">
-        <div v-if="multiple.value">
+        <div v-if="multiple.value" class="ab-dropdownitem__item-name-checkbox">
           <Checkbox :disabled="disabled" :checked="isActive(value)"></Checkbox>
         </div>
         <slot>

web-frontend/modules/builder/components/elements/components/ChoiceElement.vue

@@ -14,6 +14,7 @@
       "
       :show-search="false"
       :multiple="element.multiple"
+      :clearable="!element.multiple && !element.required"
       @hide="onFormElementTouch"
     >
       <ABDropdownItem

web-frontend/modules/builder/components/elements/components/RecordSelectorElement.vue

@@ -13,6 +13,7 @@
       class="choice-element"
       :placeholder="resolvedPlaceholder"
       :multiple="element.multiple"
+      :clearable="!element.multiple && !element.required"
       :before-show="beforeShow"
       @hide="onFormElementTouch"
       @query-change="adhocSearch = $event"

web-frontend/modules/core/assets/scss/components/builder/elements/ab_components/ab_dropdownitem.scss

@@ -135,6 +135,10 @@
     text-decoration: none;
   }
 
+  .ab-dropdownitem__item--single & {
+    padding-right: calc(var(--input-horizontal-padding, 12px) + 1.25em);
+  }
+
   .ab-dropdownitem__item.disabled & {
     color: $palette-neutral-700;
 
@@ -150,8 +154,12 @@
   font-weight: 500;
   line-height: 120%;
   gap: 0.5em;
+  min-width: 0;
+  max-width: 100%;
 
-  @extend %ellipsis;
+  .ab-dropdownitem__item-name-checkbox {
+    flex-shrink: 0;
+  }
 
   .ab-dropdownitem__item-link:active & {
     color: color-mix(
@@ -161,3 +169,10 @@
     );
   }
 }
+
+.ab-dropdownitem__item-name-text {
+  @extend %ellipsis;
+
+  flex: 1 1 auto;
+  min-width: 0;
+}

web-frontend/modules/core/mixins/dropdown.js

@@ -138,6 +138,15 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * If true (single-select only), choosing the already selected value clears the
+     * selection (emits `null`).
+     */
+    clearable: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     /**
      * Before show let the opportunity to execute something before actually opening the
      * dropdown. Useful when, for instance, you want to populate the item on demand only
@@ -487,11 +496,21 @@ export default {
         this.$emit('update:modelValue', newValue) // Vue 3 compatibility
         this.$emit('change', newValue)
       } else {
-        // emitting the updated value Vue 2 style.
-        this.$emit('input', value)
-        // emitting the updated value Vue 3 style.
-        this.$emit('update:modelValue', value) // Vue 3 compatibility
-        this.$emit('change', value)
+        const hasSingleValue =
+          this.currentValue !== null && this.currentValue !== undefined
+        if (
+          this.clearable &&
+          hasSingleValue &&
+          _.isEqual(value, this.currentValue)
+        ) {
+          this.$emit('input', null)
+          this.$emit('update:modelValue', null)
+          this.$emit('change', null)
+        } else {
+          this.$emit('input', value)
+          this.$emit('update:modelValue', value)
+          this.$emit('change', value)
+        }
         this.hide()
       }
     },

web-frontend/test/unit/builder/components/elements/components/__snapshots__/ChoiceElement.spec.js.snap

@@ -203,7 +203,7 @@ exports[`ChoiceElement > as manual dropdown 1`] = `
                 
                 
                 <li
-                  class="ab-dropdownitem__item ab-dropdownitem__item--no-options"
+                  class="ab-dropdownitem__item ab-dropdownitem__item--no-options ab-dropdownitem__item--single"
                 >
                   <a
                     class="ab-dropdownitem__item-link"
@@ -228,7 +228,7 @@ exports[`ChoiceElement > as manual dropdown 1`] = `
                   />
                 </li>
                 <li
-                  class="ab-dropdownitem__item ab-dropdownitem__item--no-options"
+                  class="ab-dropdownitem__item ab-dropdownitem__item--no-options ab-dropdownitem__item--single"
                 >
                   <a
                     class="ab-dropdownitem__item-link"

web-frontend/test/unit/core/components/dropdown.spec.js

@@ -117,6 +117,33 @@ describe('Dropdown component', () => {
     expect(wrapper.element).toMatchSnapshot()
   })
 
+  test('clearable single select clears when choosing the active value', async () => {
+    let wrapper = null
+
+    const onInput = vi.fn(async (newVal) => {
+      wrapper.setProps({ value: newVal })
+      await wrapper.vm.$nextTick()
+    })
+
+    wrapper = await mountComponent({
+      props: { value: 'a', clearable: true },
+      slots: {
+        default: `<DropdownItem value="a" name="A"/>
+          <DropdownItem value="b" name="B"/>`,
+      },
+      listeners: { input: onInput },
+    })
+
+    await wrapper.find('.dropdown__selected').trigger('click')
+    await wrapper
+      .find('.select__items :nth-child(1)')
+      .find('.select__item-link')
+      .trigger('click')
+    await wrapper.vm.$nextTick()
+
+    expect(onInput).toHaveBeenLastCalledWith(null)
+  })
+
   test('focus', async () => {
     let wrapper = null