diff --git a/packages/ui-default/package.json b/packages/ui-default/package.json
index 39b2387bb..2e1bbf265 100644
--- a/packages/ui-default/package.json
+++ b/packages/ui-default/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.10.4",
+  "version": "4.10.5",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "hydro.js",
diff --git a/packages/ui-default/pages/home_preference.page.jsx b/packages/ui-default/pages/home_preference.page.jsx
index 4bd703e7a..94761a872 100644
--- a/packages/ui-default/pages/home_preference.page.jsx
+++ b/packages/ui-default/pages/home_preference.page.jsx
@@ -94,7 +94,8 @@ const page = new NamedPage('home_preference', async () => {
       .hide()
       .after($el);
 
-    $('#codelang-main-select').on('change', function () {
+    function onChangeMain() {
+      console.log(this.value, window.LANGS);
       const options = {};
       for (const key in window.LANGS) {
         if (key.startsWith(`${this.value}.`) && key !== this.value) options[key] = window.LANGS[key].display;
@@ -107,7 +108,8 @@ const page = new NamedPage('home_preference', async () => {
         $('#codelang-sub-container').hide();
         $('[name="codeLang"]').val(this.value);
       }
-    });
+    }
+    $('#codelang-main-select').on('change', onChangeMain);
     $('#codelang-sub-select').on('change', function () {
       $('[name="codeLang"]').val(this.value);
     });
@@ -118,9 +120,10 @@ const page = new NamedPage('home_preference', async () => {
     setOptions($('#codelang-main-select'), main);
     const current = $('[name="codeLang"]').val();
     if (current.includes('.')) {
-      const [m, s] = current.split('.');
+      const [m] = current.split('.');
       $('#codelang-main-select').val(m);
-      $('#codelang-sub-select').val(s).show();
+      onChangeMain.call({ value: $('#codelang-main-select').val() });
+      $('#codelang-sub-select').val(current);
     } else $('#codelang-main-select').val(current);
 
     if (success) {
diff --git a/packages/ui-default/pages/problem_submit.page.js b/packages/ui-default/pages/problem_submit.page.js
index ee69647f1..6fe8052b7 100644
--- a/packages/ui-default/pages/problem_submit.page.js
+++ b/packages/ui-default/pages/problem_submit.page.js
@@ -12,7 +12,7 @@ const page = new NamedPage(['problem_submit', 'contest_detail_problem_submit', '
     $(ev.currentTarget).hide();
     $('[name="problem-sidebar__categories"]').show();
   });
-  $('#codelang-main-select').on('change', function () {
+  function onChangeMain() {
     const options = {};
     for (const key in window.LANGS) {
       if (UiContext.pdocConfig.langs && !UiContext.pdocConfig.langs.includes(key)) continue;
@@ -26,7 +26,8 @@ const page = new NamedPage(['problem_submit', 'contest_detail_problem_submit', '
       $('#codelang-sub-container').hide();
       $('[name="lang"]').val(this.value);
     }
-  });
+  }
+  $('#codelang-main-select').on('change', onChangeMain);
   $('#codelang-sub-select').on('change', function () {
     $('[name="lang"]').val(this.value);
   });
@@ -38,10 +39,10 @@ const page = new NamedPage(['problem_submit', 'contest_detail_problem_submit', '
   setOptions($('#codelang-main-select'), main);
   const current = $('[name="lang"]').val();
   if (current.includes('.')) {
-    const [m, s] = current.split('.');
+    const [m] = current.split('.');
     $('#codelang-main-select').val(m);
-    $('#codelang-sub-select').val(s);
-    $('#codelang-sub-container').show();
+    onChangeMain.call({ value: $('#codelang-main-select').val() });
+    $('#codelang-sub-select').val(current);
   } else $('#codelang-main-select').val(current);
 });