Bug 41151 - Vue Additional Fields UX Improvements
Summary: Vue Additional Fields UX Improvements
Status: Signed Off
Alias: None
Product: Koha
Classification: Unclassified
Component: Staff interface (show other bugs)
Version: Main
Hardware: All All
: P5 - low minor
Assignee: Martin Renvoize (ashimema)
QA Contact: Jonathan Druart
URL:
Keywords: rel_26_05_candidate
Depends on: 38262
Blocks:
  Show dependency treegraph
 
Reported: 2025-10-31 07:43 UTC by Martin Renvoize (ashimema)
Modified: 2026-03-02 09:40 UTC (History)
7 users (show)

See Also:
GIT URL:
Initiative type: ---
Sponsorship status: ---
Comma delimited list of Sponsors:
Crowdfunding goal: 0
Crowdfunding committed: 0
Crowdfunding contact:
Patch complexity: Small patch
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:
Circulation function:


Attachments
Bug 41151: Modernize clear button UX in additional fields (14.06 KB, patch)
2025-10-31 11:44 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 41151: Improve additional fields display alignment and formatting (4.50 KB, patch)
2025-10-31 11:44 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 41151: Display multi-value additional fields as lists in datatables (4.71 KB, patch)
2025-10-31 11:44 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Updated table display (10.25 KB, image/png)
2025-10-31 11:49 UTC, Martin Renvoize (ashimema)
Details
Updated input view (52.02 KB, image/png)
2025-10-31 11:49 UTC, Martin Renvoize (ashimema)
Details
Updated display view (33.01 KB, image/png)
2025-10-31 11:50 UTC, Martin Renvoize (ashimema)
Details
Bug 41151: Modernize clear button UX in additional fields (14.11 KB, patch)
2025-10-31 12:42 UTC, David Nind
Details | Diff | Splinter Review
Bug 41151: Improve additional fields display alignment and formatting (4.54 KB, patch)
2025-10-31 12:42 UTC, David Nind
Details | Diff | Splinter Review
Bug 41151: Display multi-value additional fields as lists in datatables (4.76 KB, patch)
2025-10-31 12:42 UTC, David Nind
Details | Diff | Splinter Review
Bug 41151: Modernize clear button UX in additional fields (14.11 KB, patch)
2025-11-01 14:12 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 41151: Improve additional fields display alignment and formatting (4.54 KB, patch)
2025-11-01 14:12 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 41151: Display multi-value additional fields as lists in datatables (4.76 KB, patch)
2025-11-01 14:12 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 41151: Preserve multi-value formatting in datatable exports (2.51 KB, patch)
2025-11-01 14:12 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 41151: Add optional clear button to standard input components (9.41 KB, patch)
2025-11-01 14:47 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 41151: Wire clearable prop through FormElement to input components (2.89 KB, patch)
2025-11-01 14:47 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 41151: Replace FontAwesome icons with SVG and improve input styling (10.12 KB, patch)
2025-11-01 14:47 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 41151: Replace FontAwesome icons with SVG and improve input styling (11.03 KB, patch)
2025-11-03 10:35 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 41151: Modernize clear button UX in additional fields (14.11 KB, patch)
2025-11-07 12:20 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 41151: Improve additional fields display alignment and formatting (4.54 KB, patch)
2025-11-07 12:20 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 41151: Display multi-value additional fields as lists in datatables (4.76 KB, patch)
2025-11-07 12:20 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 41151: Preserve multi-value formatting in datatable exports (2.51 KB, patch)
2025-11-07 12:20 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 41151: Add optional clear button to standard input components (9.41 KB, patch)
2025-11-07 12:20 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 41151: Wire clearable prop through FormElement to input components (2.89 KB, patch)
2025-11-07 12:20 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 41151: Replace FontAwesome icons with SVG and improve input styling (11.03 KB, patch)
2025-11-07 12:20 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 41151: Revert multi-value display and export formatting changes (5.54 KB, patch)
2025-11-07 12:20 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 41151: Modernize clear button UX in additional fields (14.11 KB, patch)
2026-03-02 09:40 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 41151: Improve additional fields display alignment and formatting (4.55 KB, patch)
2026-03-02 09:40 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 41151: Display multi-value additional fields as lists in datatables (4.76 KB, patch)
2026-03-02 09:40 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 41151: Preserve multi-value formatting in datatable exports (2.56 KB, patch)
2026-03-02 09:40 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 41151: Add optional clear button to standard input components (9.46 KB, patch)
2026-03-02 09:40 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 41151: Wire clearable prop through FormElement to input components (2.92 KB, patch)
2026-03-02 09:40 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 41151: Replace FontAwesome icons with SVG and improve input styling (11.08 KB, patch)
2026-03-02 09:40 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 41151: Revert multi-value display and export formatting changes (5.59 KB, patch)
2026-03-02 09:40 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Martin Renvoize (ashimema) 2025-10-31 07:43:20 UTC
The additional fields input UI's could do with some improvements as noted in bug 38262.

To summarise:
1) Spacing between 'Clear' and 'New' buttons on input fields needs work
2) When viewing repeatable, searchable fields in display tables we use a comma separated list instead of field per line.
3) When viewing fields in details display the alignment of the addiional field labels and container is inconsistent

I'd go further on point one and ask why we need 'Clear' as a distinct element as it's inconsistent with the 'normal' field entry input boxes.  I think I'd prefer to try and make additional fields as consistent as possible with normal input fields, perhaps embedding a 'x' clear check within the far right of input fields to give that 'Clear' functionality accross both additional field and normal field inputs.
Comment 1 Martin Renvoize (ashimema) 2025-10-31 11:44:22 UTC Comment hidden (obsolete)
Comment 2 Martin Renvoize (ashimema) 2025-10-31 11:44:24 UTC Comment hidden (obsolete)
Comment 3 Martin Renvoize (ashimema) 2025-10-31 11:44:26 UTC Comment hidden (obsolete)
Comment 4 Martin Renvoize (ashimema) 2025-10-31 11:49:00 UTC Comment hidden (obsolete)
Comment 5 Martin Renvoize (ashimema) 2025-10-31 11:49:47 UTC Comment hidden (obsolete)
Comment 6 Martin Renvoize (ashimema) 2025-10-31 11:50:14 UTC Comment hidden (obsolete)
Comment 7 David Nind 2025-10-31 12:42:04 UTC Comment hidden (obsolete)
Comment 8 David Nind 2025-10-31 12:42:07 UTC Comment hidden (obsolete)
Comment 9 David Nind 2025-10-31 12:42:11 UTC Comment hidden (obsolete)
Comment 10 David Nind 2025-10-31 12:44:59 UTC
Fantastic work Martin!

These changes make adding, editing, and viewing the additional fields for Vue enabled modules much more consistent and usable.

Testing notes (using KTD):

1. Apply patches (and dependencies)
2. Rebuild the JavaScript (yarn js:build or yarn build(?))
3. Restart everything: restart_all
4. Define some additional fields for vendors (Administration > Additional parameters > Additional fields > Acquisitions > E-resource management > Vendors (aqbooksellers:vendor)). Create a combination of additional fields:
  . Single field
  . Repeatable field
  . Field using authorized values (YES_NO)
  . Repeatable field using authorized values (YES_NO)
  . Searchable
  . Repeatable and searchable
5. Define some additional fields for ERM agreements (Administration > Additional parameters > Additional fields > Acquisitions > Vendors > Agreements (erm_agreements))
  . Single field
  . Repeatable field
  . Field using authorized values (YES_NO)
  . Repeatable field using authorized values (YES_NO)
  . Searchable
  . Repeatable and searchable
6. Test additional fields for the ERM module:
   . Enable the ERM module (ERMModule system preference)
   . Create an agreement and add some additional fields
   . View the agreement with the additional fields
   . View the list of agreements
7. Test additional fields for vendors:
   . Create a new vendor and add some additional fields (Acquisitions > + New vendor)
   . View the vendor information with additional fields
   . View the list of vendors
Comment 11 Michaela Sieber 2025-10-31 13:00:54 UTC
I like it ! 
There is only one thing I noticed when exporting a result list:

if you have an additional field that is repeatable it is displayed now as a list with bullets. 
But if you do an export (excel or csv) the values are all in one cell without separators. 
In the past the values were separated with a comma+space
Comment 12 Martin Renvoize (ashimema) 2025-11-01 14:12:30 UTC Comment hidden (obsolete)
Comment 13 Martin Renvoize (ashimema) 2025-11-01 14:12:33 UTC Comment hidden (obsolete)
Comment 14 Martin Renvoize (ashimema) 2025-11-01 14:12:35 UTC Comment hidden (obsolete)
Comment 15 Martin Renvoize (ashimema) 2025-11-01 14:12:38 UTC Comment hidden (obsolete)
Comment 16 Martin Renvoize (ashimema) 2025-11-01 14:14:35 UTC
Thankyou so much for the thorough testing and great spot finding the export issue Michaela, hopefully my additional patch resolves that too now :)
Comment 17 Martin Renvoize (ashimema) 2025-11-01 14:47:41 UTC Comment hidden (obsolete)
Comment 18 Martin Renvoize (ashimema) 2025-11-01 14:47:44 UTC Comment hidden (obsolete)
Comment 19 Martin Renvoize (ashimema) 2025-11-01 14:47:47 UTC Comment hidden (obsolete)
Comment 20 Martin Renvoize (ashimema) 2025-11-01 14:48:56 UTC
I've added a few more follow-ups to add the clear functionality on to the standard inputs now too.. more consistency accross the board,
Comment 21 Michaela Sieber 2025-11-03 08:25:25 UTC
(In reply to Martin Renvoize (ashimema) from comment #16)
> Thankyou so much for the thorough testing and great spot finding the export
> issue Michaela, hopefully my additional patch resolves that too now :)

Your're welcome! 
I set up a new sandbox with the new patches but the exported values are still in one cell without separator. As well in Excel as in Libre Office
Comment 22 Martin Renvoize (ashimema) 2025-11-03 10:35:20 UTC Comment hidden (obsolete)
Comment 23 David Nind 2025-11-05 23:33:10 UTC
Can confirm that when exporting repeatable fields with multiple values, the values are no longer comma separated with a space.

For example, before the patches it was "Test 1, Test2", now it is "Test 1Test2".
Comment 24 David Nind 2025-11-05 23:35:33 UTC
It may be one of the dependent bugs causing this: bug 38262, bug 38466
Comment 25 Martin Renvoize (ashimema) 2025-11-07 11:21:00 UTC
Right.. I've found the issue.. Davids security work around for DataTables breaks any multiple line formatted cells for export/output.

Bug 37727 - CVE-2024-24337 - Fix CSV formula injection - client side (DataTables)
Comment 26 Martin Renvoize (ashimema) 2025-11-07 12:20:22 UTC Comment hidden (obsolete)
Comment 27 Martin Renvoize (ashimema) 2025-11-07 12:20:24 UTC Comment hidden (obsolete)
Comment 28 Martin Renvoize (ashimema) 2025-11-07 12:20:27 UTC Comment hidden (obsolete)
Comment 29 Martin Renvoize (ashimema) 2025-11-07 12:20:29 UTC Comment hidden (obsolete)
Comment 30 Martin Renvoize (ashimema) 2025-11-07 12:20:32 UTC Comment hidden (obsolete)
Comment 31 Martin Renvoize (ashimema) 2025-11-07 12:20:34 UTC Comment hidden (obsolete)
Comment 32 Martin Renvoize (ashimema) 2025-11-07 12:20:37 UTC Comment hidden (obsolete)
Comment 33 Martin Renvoize (ashimema) 2025-11-07 12:20:39 UTC Comment hidden (obsolete)
Comment 34 Martin Renvoize (ashimema) 2025-11-07 12:22:25 UTC
OK, I had to revert part of this set.. I chose to revert it as a distinct commit to clarify my intentions, and I'll add a follow-up bug for the datatable display enhancement we intended to implement here.

Apologies, but I feel it's better to drop that last piece for now rather than hold up the rest.
Comment 35 Martin Renvoize (ashimema) 2026-03-02 09:40:31 UTC
Created attachment 194273 [details] [review]
Bug 41151: Modernize clear button UX in additional fields

This patch improves the UX of the clear functionality for additional
fields by:

- Replacing the separate "Clear" button with an inline clear icon (×)
  that appears inside the input field when there is content
- Adding proper spacing between the input field and "New" button
  using flexbox layout
- Styling the "New" button with Bootstrap button classes for
  consistency
- Making the clear button only visible when the field has content

This provides a more modern, intuitive interface pattern similar to
standard search inputs and maintains better visual consistency with
other form elements in Koha.

Signed-off-by: David Nind <david@davidnind.com>
Comment 36 Martin Renvoize (ashimema) 2026-03-02 09:40:32 UTC
Created attachment 194274 [details] [review]
Bug 41151: Improve additional fields display alignment and formatting

This patch improves the display of additional fields by:

- Removing the nested fieldset wrapper that caused alignment issues
- Converting the legend to a header list item for consistency
- Aligning additional field labels with main form field labels
- Displaying multi-value fields (comma-separated) on separate lines
  without bullets or extra indentation, aligned with single values
- Using the same visual separator pattern as the entry form

This creates perfect alignment between additional fields and regular
fields in the display view, with multi-value fields showing cleanly
stacked values in the same column as single values.

Signed-off-by: David Nind <david@davidnind.com>
Comment 37 Martin Renvoize (ashimema) 2026-03-02 09:40:33 UTC
Created attachment 194275 [details] [review]
Bug 41151: Display multi-value additional fields as lists in datatables

This patch improves the display of searchable repeatable additional
fields in datatable columns by:

- Detecting comma-separated values in the value_str field
- Rendering multiple values as an HTML unordered list instead of
  comma-separated text
- Adding appropriate CSS styling for list display within table cells
- Maintaining single-value display for non-repeatable fields

This makes multi-value additional fields much more readable in list
views, with each value appearing on its own line within the table cell.

For example, "Bang, History" now displays as:
  • Bang
  • History

This completes the UX improvements for additional fields across all
three contexts: entry forms, detail views, and list datatables.

Signed-off-by: David Nind <david@davidnind.com>
Comment 38 Martin Renvoize (ashimema) 2026-03-02 09:40:35 UTC
Created attachment 194276 [details] [review]
Bug 41151: Preserve multi-value formatting in datatable exports

This patch fixes the export functionality for repeatable additional
fields in datatables. Previously, when exporting to CSV or Excel,
multi-value fields displayed as HTML markup instead of properly
formatted values.

The fix detects when DataTables is requesting data for export
(type === "export") and returns newline-separated values instead of
HTML list markup. This ensures that:

- CSV exports properly quote cells containing newlines
- Excel exports display each value on a separate line within the cell
- The visual list structure is maintained in exported data
- Each field's values remain in the correct cell/row

For example, a field with values "Bang, History" now exports as:
  Bang
  History

(with each value on its own line within the same cell)

This complements the display improvements made in the previous commits
while ensuring exports remain clean and properly formatted.

Signed-off-by: David Nind <david@davidnind.com>
Comment 39 Martin Renvoize (ashimema) 2026-03-02 09:40:36 UTC
Created attachment 194277 [details] [review]
Bug 41151: Add optional clear button to standard input components

This patch enhances the core input components (InputText, InputNumber,
and TextArea) with optional clear button functionality, providing a
consistent UX across both standard fields and additional fields.

Changes:
- Added optional 'clearable' prop (default: true) to all three components
- Implemented clear button with identical styling to additional fields
- Clear button only appears when field has content
- Can be disabled per-field with clearable: false if needed

The clear button:
- Appears as a small 'x' icon on the right side of the input
- Only shows when the field contains a value
- Uses consistent styling and behavior across all input types
- Includes proper ARIA labels for accessibility
- Has hover and focus states for better UX

Usage (enabled by default):
  <InputText v-model="myValue" />
  <InputNumber v-model="myNumber" />
  <TextArea v-model="myText" />

To disable for specific fields:
  <InputText :clearable="false" v-model="myValue" />

This provides developers with a simple, modern clear button UX by
default across all form inputs, ensuring consistency throughout the
entire application.

Signed-off-by: David Nind <david@davidnind.com>
Comment 40 Martin Renvoize (ashimema) 2026-03-02 09:40:38 UTC
Created attachment 194278 [details] [review]
Bug 41151: Wire clearable prop through FormElement to input components

This patch enables the clearable functionality in forms that use the
BaseResource/FormElement pattern by passing the clearable attribute
from field definitions through to the underlying input components.

Changes:
- Updated FormElement to pass clearable prop to InputText
- Updated FormElement to pass clearable prop to InputNumber
- Updated FormElement to pass clearable prop to TextArea

The logic only passes clearable when explicitly defined in the field
configuration, allowing the component's default (true) to apply when
not specified. This means:

- Fields without clearable attribute: clear button enabled (default)
- Fields with clearable: false: clear button disabled
- Fields with clearable: true: clear button explicitly enabled

All text, number, and textarea fields in BaseResource forms (like
agreements, packages, titles, etc.) now automatically get the clear
button UX unless explicitly disabled.

Example to disable for a specific field:
  {
    name: "my_field",
    type: "text",
    label: $__("My Field"),
    clearable: false,  // Disable clear button for this field
  }

This completes the clear button UX implementation across all form
input patterns in the application.

Signed-off-by: David Nind <david@davidnind.com>
Comment 41 Martin Renvoize (ashimema) 2026-03-02 09:40:39 UTC
Created attachment 194279 [details] [review]
Bug 41151: Replace FontAwesome icons with SVG and improve input styling

This patch updates all clear buttons with two improvements:

1. Replaced FontAwesome icons with cleaner SVG X icon from vue-select
2. Updated input padding to match Select2/vue-select styling

Changes:
- Replaced <i class="fa fa-times"></i> with SVG in InputText
- Replaced <i class="fa fa-times"></i> with SVG in InputNumber
- Replaced <i class="fa fa-times"></i> with SVG in TextArea
- Replaced <i class="fa fa-times"></i> with SVG in AdditionalFieldsEntry
- Updated CSS from .clear-button i to .clear-button svg
- Added title attribute for better tooltip support
- Updated input padding from just "padding-right: 2rem" to full padding
  specification: "padding: 0.375rem 2rem 0.375rem 0.75rem"
- Added line-height: 1.5 to match Select2 styling

The SVG icon:
- Is the same 10x10 SVG used in vue-select components
- Uses currentColor via fill for proper color inheritance
- Maintains the same hover/focus color transitions (#999 → #333)
- Provides a cleaner, more professional appearance

The improved padding:
- Matches the vertical and horizontal spacing of Select2 dropdowns
- Makes text inputs less "squashed" and more spacious
- Creates visual consistency across all form controls
- Uses Bootstrap's standard input padding (0.375rem vertical, 0.75rem horizontal)

This creates visual consistency between clear buttons and padding across
all input types and the existing Select2/vue-select components.

Signed-off-by: David Nind <david@davidnind.com>
Comment 42 Martin Renvoize (ashimema) 2026-03-02 09:40:41 UTC
Created attachment 194280 [details] [review]
Bug 41151: Revert multi-value display and export formatting changes

This reverts commits:
- 042b0e90bab "Bug 41151: Preserve multi-value formatting in datatable exports"
- dc280faea41 "Bug 41151: Display multi-value additional fields as lists in datatables"

These commits attempted to improve the display of multi-value additional
fields in datatables by rendering them as lists and preserving newlines
in exports. However, the implementation conflicted with existing
DataTables export button formatting that strips newlines for security
reasons (Bug 37727).

The root issue is that Koha currently uses:
- datatables.net-buttons 2.3.4 (from Feb 2023)
- datatables.net-vue3 2.0.0 (requires DataTables 1.x)

Native support for escapeExcelFormula (which would allow proper newline
handling) requires:
- datatables.net-buttons 3.2.0+ (introduced escapeExcelFormula)
- datatables.net-vue3 3.x (for DataTables 2.x compatibility)

This revert allows us to:
1. Create a separate bug for upgrading DataTables to version 2.x with
   Buttons 3.x for native formula escaping and better export handling
2. Re-implement the multi-value display feature with proper export
   support once the DataTables upgrade is complete

The reverted functionality will be restored in future patches once the
underlying DataTables infrastructure is upgraded.

Signed-off-by: David Nind <david@davidnind.com>