From b73e9ca7f1909c35b41d034099236e32b520b7d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20Krier?= <ced@b2ck.com>
Date: Wed, 21 Aug 2024 12:58:30 +0200
Subject: [PATCH] Toggle the option's selected state of multiselection on mouse
 down

This provides a more intuitive behavior for user.

Closes #13459
---
 sao/src/view/form.js | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/sao/src/view/form.js b/sao/src/view/form.js
index 156048b3ec..0d7e48ab1c 100644
--- a/sao/src/view/form.js
+++ b/sao/src/view/form.js
@@ -4557,6 +4557,14 @@ function eval_pyson(value){
             Sao.View.Form.MultiSelection._super.init.call(
                 this, view, attributes);
             this.select.prop('multiple', true);
+
+            this.select.on('mousedown', 'option', (evt) => {
+                evt.preventDefault();
+                var scroll = this.select.get(0).scrollTop;
+                evt.target.selected = !evt.target.selected;
+                this.select.trigger('change');
+                setTimeout(() => this.select.get(0).scrollTop = scroll, 0);
+            }).mousemove(evt => evt.preventDefault());
         },
         set_selection: function(selection, help) {
             Sao.View.Form.MultiSelection._super.set_selection.call(
@@ -5422,6 +5430,15 @@ function eval_pyson(value){
                 Sao.View.Form.Dict.MultiSelection._super
                     .create_widget.call(this);
                 this.input.prop('multiple', true);
+
+                this.input.on('mousedown', 'option', (evt) => {
+                    evt.preventDefault();
+                    var scroll = this.input.get(0).scrollTop;
+                    evt.target.selected = !evt.target.selected;
+                    this.input.trigger('change');
+                    setTimeout(() => this.input.get(0).scrollTop = scroll, 0);
+                }).mousemove(evt => evt.preventDefault());
+
                 var widget_help = this.definition.help;
                 if (widget_help) {
                     this.input.children().each(function() {