Bug 40857 - Dropdown menu for Booking cancellation is hidden in modal
Summary: Dropdown menu for Booking cancellation is hidden in modal
Status: Pushed to main
Alias: None
Product: Koha
Classification: Unclassified
Component: Templates (show other bugs)
Version: Main
Hardware: All All
: P5 - low normal
Assignee: Paul Derscheid
QA Contact: Martin Renvoize (ashimema)
URL:
Keywords: rel_24_11_candidate, rel_25_05_candidate
Depends on: 38222
Blocks:
  Show dependency treegraph
 
Reported: 2025-09-22 20:30 UTC by Caroline Cyr La Rose
Modified: 2025-09-26 16:41 UTC (History)
2 users (show)

See Also:
GIT URL:
Change sponsored?: ---
Patch complexity: ---
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:
25.11.00
Circulation function:


Attachments
Bug 40857: add context parameter for modal overlay (5.45 KB, patch)
2025-09-23 08:42 UTC, Paul Derscheid
Details | Diff | Splinter Review
Bug 40857: add context parameter for modal overlay (5.51 KB, patch)
2025-09-23 13:28 UTC, Caroline Cyr La Rose
Details | Diff | Splinter Review
Bug 40857: add context parameter for modal overlay (5.58 KB, patch)
2025-09-24 13:36 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 Caroline Cyr La Rose 2025-09-22 20:30:11 UTC
When you have more that one option in the BOOKING_CANCELLATION authorised value category, the options in the cancellation modal are hidden. You can still scroll, but it looks very weird.

I think it may be because it's not a normal dropdown in the sense that you can still type in something and not just select. This differs from the usual Koha behaviour where if there is a list of authorised values, you can't type anything, and if there aren't authorised values, then it's a text field instead of a dropdown menu. This one tries to be both at once and maybe there is no style for that yet??

To recreate:

1. Make an item bookable
   1.1. Go to a record (e.g. http://localhost:8081/cgi-bin/koha/catalogue/detail.pl?biblionumber=285)
   1.2. Go to the Items tab on the left side of the screen
   1.3. Under Bookable, choose Yes and click 'Update'

2. Place a booking
   2.1. Click 'Place booking' at the top of the detailed record screen
   2.2. Fill out the form
   2.3. Click 'Submit'

3. Try to cancel the booking
   3.1. Go to the 'Bookings' tab on the left side of the screen
   3.2. Click 'Cancel' next to the booking
   --> A modal appears with a text field for the cancellation reason
   3.3. Click 'No, do not cancel'

4. Add one authorised value in BOOKING_CANCELLATION
   4.1. Go to Administration > Authorized values
   4.2. Search for BOOKING_CANCELLATION
   4.3. Click 'Add'
   4.4. Fill out the form
   4.5. Click 'Save'

5. Redo step 3
   --> The option appears over the text field -- OK

6. Add one or two more authorised values

7. Redo step 3
   --> The option appear under the text field and are hidden by the modal footer
Comment 1 Paul Derscheid 2025-09-23 07:39:40 UTC
Hi Caroline, will take a look right away.
Comment 2 Paul Derscheid 2025-09-23 08:42:02 UTC
Created attachment 186779 [details] [review]
Bug 40857: add context parameter for modal overlay

- The combobox dropdown in modals scrolled with the modal body instead of overlaying, due to Bootstrap's overflow: hidden on
modals clipping extending content.
- Added context parameter to combobox config; setting context: 'modal' uses Popper's fixed positioning strategy for proper
overlay.
- For reference: https://popper.js.org/docs/v2/constructors/#strategy

To test:
1. Make an item bookable
   1.1. Go to a record (e.g. http://localhost:8081/cgi-bin/koha/catalogue/detail.pl?biblionumber=285)
   1.2. Go to the Items tab on the left side of the screen
   1.3. Under Bookable, choose Yes and click 'Update'

2. Place a booking
   2.1. Click 'Place booking' at the top of the detailed record screen
   2.2. Fill out the form
   2.3. Click 'Submit'

3. Try to cancel the booking
   3.1. Go to the 'Bookings' tab on the left side of the screen
   3.2. Click 'Cancel' next to the booking
   --> A modal appears with a text field for the cancellation reason
   3.3. Click 'No, do not cancel'

4. Add one authorised value in BOOKING_CANCELLATION
   4.1. Go to Administration > Authorized values
   4.2. Search for BOOKING_CANCELLATION
   4.3. Click 'Add'
   4.4. Fill out the form
   4.5. Click 'Save'

5. Redo step 3
   --> The option appears as a dropdown below the text field -- OK

6. Add one or two more authorised values

7. Redo step 3
   --> The options appear as a dropdown below the text field -- OK
Comment 3 Paul Derscheid 2025-09-23 08:43:27 UTC
Not sure whether we recently upgraded anything, but using the strategy option in the constructor for the modal context should fix it.
Comment 4 Caroline Cyr La Rose 2025-09-23 13:28:04 UTC
Created attachment 186800 [details] [review]
Bug 40857: add context parameter for modal overlay

- The combobox dropdown in modals scrolled with the modal body instead of overlaying, due to Bootstrap's overflow: hidden on
modals clipping extending content.
- Added context parameter to combobox config; setting context: 'modal' uses Popper's fixed positioning strategy for proper
overlay.
- For reference: https://popper.js.org/docs/v2/constructors/#strategy

To test:
1. Make an item bookable
   1.1. Go to a record (e.g. http://localhost:8081/cgi-bin/koha/catalogue/detail.pl?biblionumber=285)
   1.2. Go to the Items tab on the left side of the screen
   1.3. Under Bookable, choose Yes and click 'Update'

2. Place a booking
   2.1. Click 'Place booking' at the top of the detailed record screen
   2.2. Fill out the form
   2.3. Click 'Submit'

3. Try to cancel the booking
   3.1. Go to the 'Bookings' tab on the left side of the screen
   3.2. Click 'Cancel' next to the booking
   --> A modal appears with a text field for the cancellation reason
   3.3. Click 'No, do not cancel'

4. Add one authorised value in BOOKING_CANCELLATION
   4.1. Go to Administration > Authorized values
   4.2. Search for BOOKING_CANCELLATION
   4.3. Click 'Add'
   4.4. Fill out the form
   4.5. Click 'Save'

5. Redo step 3
   --> The option appears as a dropdown below the text field -- OK

6. Add one or two more authorised values

7. Redo step 3
   --> The options appear as a dropdown below the text field -- OK

Signed-off-by: Caroline Cyr La Rose <caroline.cyr-la-rose@inlibro.com>
Comment 5 Caroline Cyr La Rose 2025-09-23 13:29:03 UTC
Thanks Paul!
Comment 6 Caroline Cyr La Rose 2025-09-23 13:29:49 UTC
For release maintainers, the cancellation reason was added in version 24.11. Please backport back to that version, if possible!
Comment 7 Martin Renvoize (ashimema) 2025-09-24 13:36:27 UTC
Created attachment 186883 [details] [review]
Bug 40857: add context parameter for modal overlay

- The combobox dropdown in modals scrolled with the modal body instead of overlaying, due to Bootstrap's overflow: hidden on
modals clipping extending content.
- Added context parameter to combobox config; setting context: 'modal' uses Popper's fixed positioning strategy for proper
overlay.
- For reference: https://popper.js.org/docs/v2/constructors/#strategy

To test:
1. Make an item bookable
   1.1. Go to a record (e.g. http://localhost:8081/cgi-bin/koha/catalogue/detail.pl?biblionumber=285)
   1.2. Go to the Items tab on the left side of the screen
   1.3. Under Bookable, choose Yes and click 'Update'

2. Place a booking
   2.1. Click 'Place booking' at the top of the detailed record screen
   2.2. Fill out the form
   2.3. Click 'Submit'

3. Try to cancel the booking
   3.1. Go to the 'Bookings' tab on the left side of the screen
   3.2. Click 'Cancel' next to the booking
   --> A modal appears with a text field for the cancellation reason
   3.3. Click 'No, do not cancel'

4. Add one authorised value in BOOKING_CANCELLATION
   4.1. Go to Administration > Authorized values
   4.2. Search for BOOKING_CANCELLATION
   4.3. Click 'Add'
   4.4. Fill out the form
   4.5. Click 'Save'

5. Redo step 3
   --> The option appears as a dropdown below the text field -- OK

6. Add one or two more authorised values

7. Redo step 3
   --> The options appear as a dropdown below the text field -- OK

Signed-off-by: Caroline Cyr La Rose <caroline.cyr-la-rose@inlibro.com>
Signed-off-by: Martin Renvoize <martin.renvoize@openfifth.co.uk>
Comment 8 Lucas Gass (lukeg) 2025-09-26 16:41:34 UTC
Nice work everyone!

Pushed to main for 25.11