From 89922cc1912e17524b3baa3dc9b20c3c968f4765 Mon Sep 17 00:00:00 2001
From: Franco Fichtner <franco@opnsense.org>
Date: Mon, 7 Jun 2021 08:33:55 +0200
Subject: [PATCH] ui: improve the subnet size selector

o toggle between 32 and 64 to indicate it's working
o serialize the option change event
o remove disabled option workaround
---
 src/www/firewall_virtual_ip_edit.php  |  7 ++--
 src/www/javascript/opnsense_legacy.js | 52 +++++++++++++--------------
 2 files changed, 28 insertions(+), 31 deletions(-)

diff --git a/src/www/firewall_virtual_ip_edit.php b/src/www/firewall_virtual_ip_edit.php
index 4f836c419..297b4a166 100644
--- a/src/www/firewall_virtual_ip_edit.php
+++ b/src/www/firewall_virtual_ip_edit.php
@@ -374,14 +374,11 @@ $( document ).ready(function() {
                             </td>
                             <td>
                               <select name="subnet_bits" data-network-id="subnet" class="selectpicker ipv4v6net" data-size="10"  data-width="auto" id="subnet_bits">
-                                <option disabled="disabled"></option> <!-- workaround for selectpicker -->
-<?php
-                                for ($i = 128; $i >= 1; $i--): ?>
+<?php for ($i = 128; $i >= 1; $i--): ?>
                                   <option value="<?=$i;?>" <?= $i == $pconfig['subnet_bits'] ? "selected=\"selected\"" :""; ?>>
                                     <?=$i;?>
                                   </option>
-<?php
-                                endfor; ?>
+<?php endfor ?>
                               </select>
                             </td>
                           </tr>
diff --git a/src/www/javascript/opnsense_legacy.js b/src/www/javascript/opnsense_legacy.js
index ef76c99c8..4065048fb 100644
--- a/src/www/javascript/opnsense_legacy.js
+++ b/src/www/javascript/opnsense_legacy.js
@@ -47,32 +47,32 @@ function notice_action(action,msgid) {
  * @param classname: classname to hook on to, select list of netmasks
  * @param data_id: data field reference to network input field
  */
-function hook_ipv4v6(classname, data_id) {
-  $("select."+classname).each(function(){
-      var selectlist_id = $(this).attr('id');
-      if ($(this).data(data_id) != undefined) {
-        $("#"+$(this).data(data_id)).change(function(){
-          var itemValue = $(this).val();
-          $("#"+selectlist_id+" > option").each(function() {
-              if (parseInt($(this).val()) > 32 && itemValue.indexOf(":") == -1 ) {
-                  $(this).hide()
-              } else {
-                  $(this).show();
-              }
-          });
-          // select highest visible option
-          if (parseInt($("#"+selectlist_id).val()) > 32 && itemValue.indexOf(":") == -1) {
-            $("#"+selectlist_id+' option[value=32]').attr('selected','selected');
-          }
-          // when select list uses selectpicker, refresh
-          if ($("#"+selectlist_id).hasClass('selectpicker')) {
-            $("#"+selectlist_id).selectpicker('refresh');
-          }
-        });
-      }
-      // trigger initial onChange event
-      $("#"+$(this).data(data_id)).change();
-  });
+function hook_ipv4v6(classname, data_id)
+{
+    $("select."+classname).each(function(){
+        var selectlist_id = $(this).attr('id');
+        if ($(this).data(data_id) != undefined) {
+            $("#"+$(this).data(data_id)).change(function () {
+                if ($(this).val().indexOf(":") == -1) {
+                    $("#"+selectlist_id).val('32');
+                    for (let i = 33; i <= 128; ++i) {
+                        $("#"+selectlist_id+' option[value=' + i + ']').hide()
+                    }
+                } else {
+                    for (let i = 33; i <= 128; ++i) {
+                        $("#"+selectlist_id+' option[value=' + i + ']').show()
+                    }
+                    $("#"+selectlist_id).val('64');
+                }
+                /* when select list uses selectpicker, refresh */
+                if ($("#"+selectlist_id).hasClass('selectpicker')) {
+                    $("#"+selectlist_id).selectpicker('refresh');
+                }
+            });
+        }
+        /* trigger initial onChange event */
+        $("#"+$(this).data(data_id)).change();
+    });
 }
 
 /**