From d8c7a368e6e2c68790cc003906244c19e91e9c19 Mon Sep 17 00:00:00 2001
From: Isaac Connor <isaac@zoneminder.com>
Date: Wed, 15 Jul 2026 19:18:17 -0400
Subject: [PATCH] fix: make Width/Height inputs update the dimensions dropdown

updateMonitorDimensions never ran when typing in the capture Width/Height
inputs. initPage() bound it via el.oninput, then a later querySelectorAll
whose selector list also matches newMonitor[Width]/[Height] overwrote that
same property with buffer_setting_oninput. Bind both with addEventListener
so they coexist.

The function would have thrown even once it fired:

- option.size() was removed in jQuery 3.0 and the classic skin ships
  jQuery 3.7.1, so the lookup that picks between a matching resolution and
  Custom raised a TypeError. Use option.length.
- form.elements['preserveAspectRatio'] is undefined for the WebSite monitor
  type, which renders Width/Height without that checkbox. Guard the access.

Drop the inline onkeyup handlers from _monitor_source_nvsocket.php. That
file is included server-side before initPage() runs, so its inputs are
already covered by the binding and the inline handler only made
updateMonitorDimensions fire twice.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
(cherry picked from commit d9ee83b4b062fd5cdcc3bf38d635126d3341141e)
---
 .../classic/views/_monitor_source_nvsocket.php   |  4 ++--
 web/skins/classic/views/js/monitor.js            | 16 ++++++++--------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/web/skins/classic/views/_monitor_source_nvsocket.php b/web/skins/classic/views/_monitor_source_nvsocket.php
index 1a2491eba..61023daaa 100644
--- a/web/skins/classic/views/_monitor_source_nvsocket.php
+++ b/web/skins/classic/views/_monitor_source_nvsocket.php
@@ -11,11 +11,11 @@
   <td><?php echo htmlSelect( 'newMonitor[Colours]', $Colours, $monitor->Colours() ); ?></td></tr>
 <tr>
   <td><?php echo translate('CaptureWidth') ?> (<?php echo translate('Pixels') ?>)</td>
-  <td><input type="number" name="newMonitor[Width]" value="<?php echo validHtmlStr($monitor->Width()) ?>" size="4" onkeyup="updateMonitorDimensions(this);"/></td>
+  <td><input type="number" name="newMonitor[Width]" value="<?php echo validHtmlStr($monitor->Width()) ?>" size="4"/></td>
 </tr>
 <tr>
   <td><?php echo translate('CaptureHeight') ?> (<?php echo translate('Pixels') ?>)</td>
-  <td><input type="number" name="newMonitor[Height]" value="<?php echo validHtmlStr($monitor->Height()) ?>" size="4" onkeyup="updateMonitorDimensions(this);"/></td>
+  <td><input type="number" name="newMonitor[Height]" value="<?php echo validHtmlStr($monitor->Height()) ?>" size="4"/></td>
 </tr>
 <tr><td><?php echo translate('PreserveAspect') ?></td><td><input type="checkbox" name="preserveAspectRatio" value="1"/></td></tr> 
 <tr><td><?php echo translate('Orientation') ?></td><td><?php echo htmlselect( 'newMonitor[Orientation]', $orientations, $monitor->Orientation() );?></td></tr>
diff --git a/web/skins/classic/views/js/monitor.js b/web/skins/classic/views/js/monitor.js
index 768d7d529..86e0dd509 100644
--- a/web/skins/classic/views/js/monitor.js
+++ b/web/skins/classic/views/js/monitor.js
@@ -14,7 +14,8 @@ function updateMonitorDimensions(element) {
     var monitorWidth = parseInt(form.elements['newMonitor[Width]'].value);
     var monitorHeight = parseInt(form.elements['newMonitor[Height]'].value);
 
-    if ( form.elements['preserveAspectRatio'].checked ) {
+    // The WebSite monitor type renders Width/Height without a preserveAspectRatio checkbox.
+    if ( form.elements['preserveAspectRatio'] && form.elements['preserveAspectRatio'].checked ) {
       switch ( element.name ) {
         case 'newMonitor[Width]':
           if ( monitorWidth >= 0 ) {
@@ -37,7 +38,7 @@ function updateMonitorDimensions(element) {
     // If we find a matching option in the dropdown, select it or select custom
 
     var option = $j('select[name="dimensions_select"] option[value="'+monitorWidth+'x'+monitorHeight+'"]');
-    if ( !option.size() ) {
+    if ( !option.length ) {
       $j('select[name="dimensions_select"]').val('');
     } else {
       $j('select[name="dimensions_select"]').val(monitorWidth+'x'+monitorHeight);
@@ -175,11 +176,10 @@ function initPage() {
   document.querySelectorAll('select[name="newMonitor[Devices]"]').forEach(function(el) {
     el.onchange = window['devices_onchange'].bind(el, el);
   });
-  document.querySelectorAll('input[name="newMonitor[Width]"]').forEach(function(el) {
-    el.oninput = window['updateMonitorDimensions'].bind(el, el);
-  });
-  document.querySelectorAll('input[name="newMonitor[Height]"]').forEach(function(el) {
-    el.oninput = window['updateMonitorDimensions'].bind(el, el);
+  // Width/Height also get a buffer_setting_oninput listener below, so use
+  // addEventListener rather than oninput= to avoid one clobbering the other.
+  document.querySelectorAll('input[name="newMonitor[Width]"],input[name="newMonitor[Height]"]').forEach(function(el) {
+    el.addEventListener('input', window['updateMonitorDimensions'].bind(el, el));
   });
   document.querySelectorAll('select[name="dimensions_select"]').forEach(function(el) {
     el.onchange = window['updateMonitorDimensions'].bind(el, el);
@@ -198,7 +198,7 @@ function initPage() {
     };
   });
   document.querySelectorAll('input[name="newMonitor[ImageBufferCount]"],input[name="newMonitor[MaxImageBufferCount]"],input[name="newMonitor[Width]"],input[name="newMonitor[Height]"],input[name="newMonitor[PreEventCount]"]').forEach(function(el) {
-    el.oninput = window['buffer_setting_oninput'].bind(el);
+    el.addEventListener('input', window['buffer_setting_oninput'].bind(el));
   });
   update_estimated_ram_use();