Merge pull request #729 from batpad/batpad/select-parent

Select profile if any of its choices are interacted with
jupyterhub · May 18, 2023 · a1a4a6f · a1a4a6f
2 parents 82040bc + 25bf703
commit a1a4a6f
Showing 1 changed file with 14 additions and 3 deletions.
diff --git a/kubespawner/templates/form.html b/kubespawner/templates/form.html
@@ -2,7 +2,8 @@
 <div class="form-group" id="kubespawner-profiles-list">
   {%- for profile in profile_list %}
     {#- Wrap everything in a label tag so clicking anywhere selects the option #}
-    <label for="profile-item-{{ profile.slug }}" class="profile">
+    <label for="profile-item-{{ profile.slug }}"
+           class="profile js-profile-label">
       <div class="radio">
         <input type="radio"
                name="profile"
@@ -17,8 +18,10 @@ <h3>{{ profile.display_name }}</h3>
           <div>
             {%- for k, option in profile.profile_options.items() %}
               <div class="option">
-                <label for="profile-option-{{ profile.slug }}-{{ k }}">{{ option.display_name }}</label>
-                <select name="profile-option-{{ profile.slug }}-{{ k }}" class="form-control">
+                <label for="profile-option-{{ profile.slug }}-{{ k }}"
+                       class="js-profile-option-label">{{ option.display_name }}</label>
+                <select name="profile-option-{{ profile.slug }}-{{ k }}"
+                        class="form-control js-profile-option-select">
                   {%- for k, choice in option['choices'].items() %}
                     <option value="{{ k }}" {% if choice.default %}selected{% endif %}>{{ choice.display_name }}</option>
                   {%- endfor %}
@@ -31,3 +34,11 @@ <h3>{{ profile.display_name }}</h3>
     </label>
   {%- endfor %}
 </div>
+<script>
+  $('.js-profile-option-select, .js-profile-option-label').click(function() {
+    // we need this bit of JS to select the profile when a <select> inside is clicked.
+    $(this).parents('.js-profile-label')
+      .find('input[type=radio]')
+      .prop('checked', true);
+  });
+</script>