4.0.0-rc21.4

* Fixed: Scrolling issue with the FFZ Control Center when using certain controls.
* Fixed: Visibility checkboxes in the In-Line Chat Actions editor not working correctly when multiple actions are in edit mode.

src/main.js

@@ -149,7 +149,7 @@ ${typeof x[1] === 'string' ? x[1] : JSON.stringify(x[1], null, 4)}`
 FrankerFaceZ.Logger = Logger;
 
 const VER = FrankerFaceZ.version_info = {
-	major: 4, minor: 0, revision: 0, extra: '-rc21.3',
+	major: 4, minor: 0, revision: 0, extra: '-rc21.4',
 	commit: __git_commit__,
 	build: __webpack_hash__,
 	toString: () =>

src/modules/main_menu/components/action-editor.vue

@@ -129,56 +129,56 @@
 							<div class="ffz--inline tw-flex">
 								<div class="tw-pd-r-1 tw-checkbox">
 									<input
-										id="key_ctrl"
 										ref="key_ctrl"
+										:id="'key_ctrl$' + id"
 										:checked="edit_data.display.keys & 1"
 										type="checkbox"
 										class="tw-checkbox__input"
 										@change="onChangeKeys"
 									>
-									<label for="key_ctrl" class="tw-checkbox__label">
+									<label :for="'key_ctrl$' + id" class="tw-checkbox__label">
 										{{ t('setting.key.ctrl', 'Ctrl') }}
 									</label>
 								</div>
 
 								<div class="tw-pd-r-1 tw-checkbox">
 									<input
-										id="key_shift"
 										ref="key_shift"
+										:id="'key_shift$' + id"
 										:checked="edit_data.display.keys & 2"
 										type="checkbox"
 										class="tw-checkbox__input"
 										@change="onChangeKeys"
 									>
-									<label for="key_shift" class="tw-checkbox__label">
+									<label :for="'key_shift$' + id" class="tw-checkbox__label">
 										{{ t('setting.key.shift', 'Shift') }}
 									</label>
 								</div>
 
 								<div class="tw-pd-r-1 tw-checkbox">
 									<input
-										id="key_alt"
 										ref="key_alt"
+										:id="'key_alt$' + id"
 										:checked="edit_data.display.keys & 4"
 										type="checkbox"
 										class="tw-checkbox__input"
 										@change="onChangeKeys"
 									>
-									<label for="key_alt" class="tw-checkbox__label">
+									<label :for="'key_alt$' + id" class="tw-checkbox__label">
 										{{ t('setting.key.alt', 'Alt') }}
 									</label>
 								</div>
 
 								<div class="tw-pd-r-1 tw-checkbox">
 									<input
-										id="key_meta"
 										ref="key_meta"
+										:id="'key_meta$' + id"
 										:checked="edit_data.display.keys & 8"
 										type="checkbox"
 										class="tw-checkbox__input"
 										@change="onChangeKeys"
 									>
-									<label for="key_meta" class="tw-checkbox__label">
+									<label :for="'key_meta$' + id" class="tw-checkbox__label">
 										{{ t('setting.key.meta', 'Meta') }}
 									</label>
 								</div>
@@ -284,11 +284,14 @@
 
 import {has, maybe_call, deep_copy} from 'utilities/object';
 
+let id = 0;
+
 export default {
 	props: ['action', 'data', 'inline', 'context', 'modifiers'],
 
 	data() {
 		return {
+			id: id++,
 			deleting: false,
 			editing: false,
 			edit_data: null

src/std-components/simplebar.vue

@@ -1,10 +1,12 @@
 <template lang="html">
 	<div
+		ref="scroller"
 		:class="classes"
 		:data-simplebar-auto-hide="autoHide"
 		:data-simplebar-scrollbar-min-size="scrollbarMinSize"
 		data-simplebar
 		class="scrollable-area"
+		@scroll="onScroll"
 	>
 		<div class="simplebar-scroll-content">
 			<div class="simplebar-content">
@@ -27,6 +29,18 @@ export default {
 			type: Number,
 			default: 10
 		}
+	},
+
+	methods: {
+		onScroll() {
+			// We do this to avoid the scroll position getting screwed up on
+			// an element that should never scroll. Thanks, web browsers.
+			const scroller = this.$refs.scroller;
+			if ( ! scroller || scroller.scrollTop == 0 )
+				return;
+
+			scroller.scrollTop = 0;
+		}
 	}
 }
 

styles/widgets/main-menu.scss

@@ -1,4 +1,8 @@
 .ffz-main-menu {
+	.scrollable-area {
+		overflow-anchor: none;
+	}
+
 	& > header {
 		* {
 			pointer-events: none;