avo 3.30.4 → 4.0.0.beta.2

data/app/javascript/{avo.base.js → application.js}

@@ -2,8 +2,7 @@
 import 'core-js/stable'
 // eslint-disable-next-line import/no-extraneous-dependencies
 import 'chartkick/chart.js/chart.esm'
-import Mapkick from 'mapkick'
-import mapboxgl from 'mapbox-gl'
+import 'mapkick/bundle'
 import 'regenerator-runtime/runtime'
 import * as ActiveStorage from '@rails/activestorage'
 import * as Mousetrap from 'mousetrap'
@@ -17,8 +16,6 @@ import './js/controllers'
 import './js/custom-confirm'
 import './js/custom-stream-actions'
 
-Mapkick.use(mapboxgl)
-
 window.Avo.localStorage = new LocalStorageService()
 
 window.Turbolinks = Turbo
@@ -31,18 +28,6 @@ Mousetrap.bind('r r r', () => {
   window.StreamActions.turbo_reload()
 })
 
-function isMac() {
-  const isMac = window.navigator.userAgent.indexOf('Mac OS X')
-
-  if (isMac >= 0) {
-    document.body.classList.add('os-mac')
-    document.body.classList.remove('os-pc')
-  } else {
-    document.body.classList.add('os-pc')
-    document.body.classList.remove('os-mac')
-  }
-}
-
 // Add the shift-pressed class to the body when the shift key is pressed
 document.addEventListener('keydown', (event) => {
   if (event.shiftKey) {
@@ -58,7 +43,7 @@ document.addEventListener('keyup', (event) => {
 
 function initTippy() {
   tippy('[data-tippy="tooltip"]', {
-    theme: 'light',
+    theme: 'basic',
     allowHTML: true,
     content(reference) {
       const title = reference.getAttribute('title')
@@ -96,7 +81,6 @@ document.addEventListener('turbo:before-stream-render', () => {
 
 document.addEventListener('turbo:load', () => {
   initTippy()
-  isMac()
 
   // Restore scroll position after r r r turbo reload
   if (scrollTop) {
@@ -150,6 +134,13 @@ document.addEventListener('turbo:before-cache', () => {
   })
 })
 
+// Watch for live changes when the user has "auto" as the default setting.
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
+  const method = event.matches ? 'add' : 'remove'
+
+  document.documentElement.classList[method]('dark')
+})
+
 window.Avo = window.Avo || { configuration: {} }
 
 window.Avo.menus = {

data/app/javascript/js/application.js

@@ -0,0 +1,40 @@
+import { Alert, Popover } from 'tailwindcss-stimulus-components'
+import { Application, Controller } from '@hotwired/stimulus'
+import Clipboard from '@stimulus-components/clipboard'
+import PasswordVisibility from '@stimulus-components/password-visibility'
+import PasswordVisibilityController from './controllers/password_visibility_controller'
+import TextareaAutogrow from 'stimulus-textarea-autogrow'
+import TurboPower from 'turbo_power'
+
+TurboPower.initialize(window.Turbo.StreamActions)
+
+const application = Application.start()
+
+// Configure Stimulus development experience
+application.debug = window?.localStorage.getItem('avo.debug')
+window.Stimulus = application
+
+/* Using this patter of providing a fake Stimulus object so the plugins do not have to bundle the Stimulus controller too.
+   Their rollup config is isntructed to use `fakeStimulus` instead of `Stimulus`.
+   output: {
+   ...
+    globals: {
+      "@hotwired/stimulus": "FakeStimulus"
+    }
+  }
+
+  Example rollup config
+  https://github.com/avo-hq/marksmith/blob/main/rollup.config.mjs
+*/
+window.FakeStimulus = {
+  Controller,
+}
+
+// Register stimulus-components controller
+application.register('alert', Alert)
+application.register('popover', Popover)
+application.register('clipboard', Clipboard)
+application.register('password-visibility', PasswordVisibilityController)
+application.register('textarea-autogrow', TextareaAutogrow)
+
+export { application }

data/app/javascript/js/controllers/action_controller.js

@@ -4,7 +4,7 @@ export default class extends Controller {
   static targets = ['resourceIds', 'form', 'selectedAll', 'indexQuery']
 
   static values = {
-    noConfirmation: Boolean,
+    confirmation: Boolean,
     resourceName: String,
   }
 
@@ -21,10 +21,10 @@ export default class extends Controller {
       this.indexQueryTarget.value = this.selectionOptions.itemSelectAllSelectedAllQueryValue
     }
 
-    if (this.noConfirmationValue) {
-      this.formTarget.requestSubmit()
-    } else {
+    if (this.confirmationValue) {
       this.element.classList.remove('hidden')
+    } else {
+      this.formTarget.requestSubmit()
     }
   }
 

data/app/javascript/js/controllers/actions_overflow_controller.js

@@ -9,9 +9,14 @@ export default class extends Controller {
 
   // get the table or grid component, if both null, get the panel body (for show page for example)
   get parentTarget() {
-    return document.querySelector('[data-component-name="avo/index/resource_table_component"]')
-      || document.querySelector('[data-component-name="avo/index/resource_grid_component"]')
-      || document.querySelector('[data-target="panel-body"]')
+    return document.querySelector('[data-component-name="avo/view_types/table_component"]')
+      || document.querySelector('[data-component-name="avo/view_types/grid_component"]')
+      || document.querySelector('.main-content-area .scrollable-wrapper') // TODO: to be fixed when we get to the row controls
+  }
+
+  // Check if the document is in RTL mode
+  get isRTL() {
+    return document.documentElement.dir === 'rtl'
   }
 
   childDimensions = null
@@ -41,9 +46,15 @@ export default class extends Controller {
   }
 
   adjustHorizontalOverflow() {
-    if (this.contentLeftOverflow) {
-      this.contentTarget.classList.remove('xl:right-0', 'sm:right-0')
-      this.contentTarget.classList.add('xl:left-0', 'sm:left-0')
+    if (this.isRTL) {
+      // RTL: Check for right overflow and flip to left if needed
+      if (this.contentRightOverflow) {
+        this.contentTarget.classList.remove('xl:start-0', 'sm:start-0')
+        this.contentTarget.classList.add('xl:end-0', 'sm:end-0')
+      }
+    } else if (this.contentLeftOverflow) {
+      this.contentTarget.classList.remove('xl:end-0', 'sm:end-0')
+      this.contentTarget.classList.add('xl:start-0', 'sm:start-0')
     }
   }
 
@@ -59,4 +70,8 @@ export default class extends Controller {
   get contentLeftOverflow() {
     return this.parentDimensions.left > this.childDimensions.left
   }
+
+  get contentRightOverflow() {
+    return this.parentDimensions.right < this.childDimensions.right
+  }
 }

data/app/javascript/js/controllers/color_scheme_switcher_controller.js

@@ -0,0 +1,226 @@
+import { Controller } from '@hotwired/stimulus'
+import Cookies from 'js-cookie'
+
+export default class extends Controller {
+  static targets = ['button', 'accentPanel', 'accentOption', 'themePanel', 'themeLabel', 'themeOption']
+
+  connect() {
+    // Read from cookies (cookie is source of truth)
+    const cookieScheme = Cookies.get('color_scheme')
+    const cookieTheme = Cookies.get('theme')
+    const cookieAccent = Cookies.get('accent_color')
+
+    // Use cookie value if it exists, otherwise use default
+    this.currentSchemeValue = cookieScheme || 'auto'
+    this.currentThemeValue = cookieTheme || 'brand'
+    this.currentAccentValue = cookieAccent || 'neutral'
+
+    this.applyScheme()
+    this.applyTheme()
+    this.applyAccent()
+    this.updateThemeLabel()
+    this.updateActiveThemeOption()
+    this.updateActiveAccentOption()
+
+    // Watch for live changes when the user has "auto" as the default setting
+    this.mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+    this.mediaQueryListener = () => {
+      if (this.currentSchemeValue === 'auto') {
+        this.applyScheme()
+      }
+    }
+    this.mediaQuery.addEventListener('change', this.mediaQueryListener)
+  }
+
+  disconnect() {
+    if (this.mediaQuery && this.mediaQueryListener) {
+      this.mediaQuery.removeEventListener('change', this.mediaQueryListener)
+    }
+  }
+
+  setScheme(event) {
+    event.preventDefault()
+    const { scheme } = event.currentTarget.dataset
+
+    if (!scheme || !['auto', 'light', 'dark'].includes(scheme)) return
+
+    this.currentSchemeValue = scheme
+    this.saveScheme()
+    this.applyScheme()
+  }
+
+  setTheme(event) {
+    event.preventDefault()
+    const { theme } = event.currentTarget.dataset
+
+    if (!theme || !['brand', 'slate', 'stone', 'gray', 'zinc', 'neutral', 'taupe', 'mauve', 'mist', 'olive'].includes(theme)) return
+
+    this.currentThemeValue = theme
+    this.saveTheme()
+    this.applyTheme()
+    this.updateThemeLabel()
+    this.updateActiveThemeOption()
+
+    // Close the dropdown
+    if (this.hasThemePanelTarget) {
+      this.themePanelTarget.setAttribute('hidden', true)
+    }
+  }
+
+  previewTheme(event) {
+    const { theme } = event.currentTarget.dataset
+    if (!theme) return
+
+    this.applyThemeClass(theme)
+    this.updateActiveThemeOptionFor(theme)
+  }
+
+  revertTheme() {
+    this.applyTheme()
+    this.updateActiveThemeOption()
+  }
+
+  setAccent(event) {
+    event.preventDefault()
+    const { accent } = event.currentTarget.dataset
+
+    if (!accent) return
+
+    this.currentAccentValue = accent
+    this.saveAccent()
+    this.applyAccent()
+
+    // Close the dropdown
+    if (this.hasAccentPanelTarget) {
+      this.accentPanelTarget.setAttribute('hidden', true)
+    }
+  }
+
+  previewAccent(event) {
+    const { accent } = event.currentTarget.dataset
+    if (!accent) return
+
+    this.applyAccentClass(accent)
+    this.updateActiveAccentOptionFor(accent)
+  }
+
+  revertAccent() {
+    this.applyAccent()
+    this.updateActiveAccentOption()
+  }
+
+  saveScheme() {
+    if (this.currentSchemeValue === 'auto') {
+      Cookies.remove('color_scheme')
+    } else {
+      Cookies.set('color_scheme', this.currentSchemeValue)
+    }
+  }
+
+  saveTheme() {
+    if (this.currentThemeValue === 'brand') {
+      Cookies.remove('theme')
+    } else {
+      Cookies.set('theme', this.currentThemeValue)
+    }
+  }
+
+  saveAccent() {
+    if (this.currentAccentValue === 'neutral') {
+      Cookies.remove('accent_color')
+    } else {
+      Cookies.set('accent_color', this.currentAccentValue)
+    }
+  }
+
+  applyScheme() {
+    const scheme = this.currentSchemeValue || 'auto'
+
+    // Remove all scheme selection classes
+    document.documentElement.classList.remove('scheme-light', 'scheme-dark', 'scheme-auto')
+
+    if (scheme === 'light') {
+      document.documentElement.classList.add('scheme-light')
+      document.documentElement.classList.remove('dark')
+    } else if (scheme === 'dark') {
+      document.documentElement.classList.add('scheme-dark')
+      document.documentElement.classList.add('dark')
+    } else if (scheme === 'auto') {
+      document.documentElement.classList.add('scheme-auto')
+      // Set dark class based on system preference
+      const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+      if (isDark) {
+        document.documentElement.classList.add('dark')
+      } else {
+        document.documentElement.classList.remove('dark')
+      }
+    }
+  }
+
+  applyTheme() {
+    this.applyThemeClass(this.currentThemeValue || 'brand')
+  }
+
+  applyThemeClass(theme) {
+    document.documentElement.classList.remove('theme-slate', 'theme-stone', 'theme-gray', 'theme-zinc', 'theme-neutral', 'theme-taupe', 'theme-mauve', 'theme-mist', 'theme-olive')
+
+    if (theme !== 'brand') {
+      document.documentElement.classList.add(`theme-${theme}`)
+    }
+  }
+
+  updateActiveThemeOption() {
+    this.updateActiveThemeOptionFor(this.currentThemeValue || 'brand')
+  }
+
+  updateActiveThemeOptionFor(activeTheme) {
+    if (!this.hasThemeOptionTarget) return
+
+    this.themeOptionTargets.forEach((option) => {
+      const { theme } = option.dataset
+      if (!theme) return
+
+      option.classList.toggle('color-scheme-switcher__theme-option--active', theme === activeTheme)
+    })
+  }
+
+  applyAccent() {
+    this.applyAccentClass(this.currentAccentValue || 'neutral')
+  }
+
+  applyAccentClass(accent) {
+    const accentColors = ['red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose']
+    accentColors.forEach((color) => {
+      document.documentElement.classList.remove(`accent-${color}`)
+    })
+
+    if (accent !== 'neutral') {
+      document.documentElement.classList.add(`accent-${accent}`)
+    }
+  }
+
+  updateActiveAccentOption() {
+    this.updateActiveAccentOptionFor(this.currentAccentValue || 'neutral')
+  }
+
+  updateActiveAccentOptionFor(activeAccent) {
+    if (!this.hasAccentOptionTarget) return
+
+    this.accentOptionTargets.forEach((option) => {
+      const { accent } = option.dataset
+      if (!accent) return
+
+      option.classList.toggle('color-scheme-switcher__accent-option--active', accent === activeAccent)
+    })
+  }
+
+  updateThemeLabel() {
+    this.updateThemeLabelText(this.currentThemeValue || 'brand')
+  }
+
+  updateThemeLabelText(theme) {
+    if (!this.hasThemeLabelTarget) return
+
+    this.themeLabelTarget.textContent = theme.charAt(0).toUpperCase() + theme.slice(1)
+  }
+}

data/app/javascript/js/controllers/dropdown_menu_controller.js

@@ -0,0 +1,42 @@
+import { Controller } from '@hotwired/stimulus'
+import { useClickOutside } from 'stimulus-use'
+
+export default class extends Controller {
+  static targets = ['menu']
+
+  static values = {
+    // One may want to have elements that are exempt from triggering the click outside event
+    exemptionContainers: Array,
+    logger: Boolean,
+  }
+
+  get exemptionContainerTargets() {
+    return this.exemptionContainersValue.map((selector) => document.querySelector(selector)).filter(Boolean)
+  }
+
+  get isOpen() {
+    return this.menuTarget.hasAttribute('open')
+  }
+
+  clickOutside(e) {
+    if (this.hasMenuTarget) {
+      const isInExemptionContainer = this.hasExemptionContainersValue && this.exemptionContainerTargets.some((container) => container.contains(e.target))
+
+      if (!isInExemptionContainer && this.isOpen) {
+        this.menuTarget.close()
+      }
+    }
+  }
+
+  connect() {
+    useClickOutside(this)
+  }
+
+  toggle() {
+    if (this.isOpen) {
+      this.menuTarget.close()
+    } else {
+      this.menuTarget.show()
+    }
+  }
+}

data/app/javascript/js/controllers/fields/code_field_controller.js

@@ -21,29 +21,46 @@ import { castBoolean } from '../../helpers/cast_boolean'
 export default class extends Controller {
   static targets = ['element']
 
+  get isDark() {
+    return document.documentElement.classList.contains('dark')
+  }
+
+  get resolvedTheme() {
+    return this.isDark ? 'material-darker' : (this.elementTarget.dataset.theme || 'default')
+  }
+
   connect() {
     const options = {
       readOnly: castBoolean(this.elementTarget.dataset.readOnly),
       mode: this.elementTarget.dataset.language,
-      theme: this.elementTarget.dataset.theme,
+      theme: this.resolvedTheme,
       tabSize: this.elementTarget.dataset.tabSize,
       indentWithTabs: castBoolean(this.elementTarget.dataset.indentWithTabs),
       lineWrapping: castBoolean(this.elementTarget.dataset.lineWrapping),
       lineNumbers: true,
+      extraKeys: {
+        Esc: (cm) => cm.getInputField().blur(),
+      },
     }
 
     const vm = this
 
     setTimeout(() => {
-      CodeMirror.fromTextArea(this.elementTarget, options).on('change', (cm) => {
-        // Add this innerText change and dispatch an event to allow stimulus to pick up the input event.
+      vm.cm = CodeMirror.fromTextArea(vm.elementTarget, options)
+      vm.cm.on('change', (cm) => {
         vm.elementTarget.innerText = cm.getValue()
         vm.elementTarget.dispatchEvent(new Event('input'))
       })
     }, 1)
+
+    this.observer = new MutationObserver(() => {
+      if (vm.cm) vm.cm.setOption('theme', vm.resolvedTheme)
+    })
+    this.observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
   }
 
   disconnect() {
+    if (this.observer) this.observer.disconnect()
     this.element.querySelector('.CodeMirror').CodeMirror.toTextArea()
   }
 }

data/app/javascript/js/controllers/fields/easy_mde_controller.js

@@ -16,11 +16,20 @@ export default class extends Controller {
     }
   }
 
+  get isDark() {
+    return document.documentElement.classList.contains('dark')
+  }
+
+  get resolvedTheme() {
+    return this.isDark ? 'material-darker' : 'default'
+  }
+
   connect() {
     const options = {
       element: this.elementTarget,
       spellChecker: this.componentOptions.spell_checker,
-      autoRefresh: { delay: 500},
+      autoRefresh: { delay: 500 },
+      theme: this.resolvedTheme,
     }
 
     if (this.view === 'show') {
@@ -32,9 +41,22 @@ export default class extends Controller {
     if (this.view === 'show') {
       this.easyMde.codemirror.options.readOnly = true
     }
+
+    this.easyMde.codemirror.on('keydown', (_cm, event) => {
+      if (event.key === 'Escape') {
+        this.easyMde.codemirror.getInputField().blur()
+      }
+    })
+
+    const vm = this
+    this.observer = new MutationObserver(() => {
+      vm.easyMde.codemirror.setOption('theme', vm.resolvedTheme)
+    })
+    this.observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
   }
 
   disconnect() {
+    if (this.observer) this.observer.disconnect()
     if (this.easyMde) {
       this.easyMde.toTextArea()
       this.easyMde = null

data/app/javascript/js/controllers/fields/key_value_controller.js

@@ -134,16 +134,18 @@ export default class extends Controller {
   }
 
   interpolatedRow(key, value, index) {
-    let result = '<div class="flex key-value-row">'
+    let result = '<div class="key-value__row" role="row">'
 
     result += `
-      ${this.inputField('key', index, key, value)}
-      ${this.inputField('value', index, key, value)}
+      ${this.inputCell('key', index, key, value)}
+      ${this.inputCell('value', index, key, value)}
     `
 
     if (this.options.editable) {
+      result += `<div class="key-value__cell key-value__cell--actions">`
       result += this.dndIcon(index)
       result += this.deleteButton(index)
+      result += '</div>'
     }
 
     result += '</div>'
@@ -151,6 +153,21 @@ export default class extends Controller {
     return result
   }
 
+  inputCell(id = 'key', index, key, value) {
+    const inputValue = id === 'key' ? key : value
+
+    return `<div class="key-value__cell key-value__cell--${id}">
+  <input
+    class="${this.options.inputClasses} key-value__input key-value-input-${id}"
+    data-action="input->key-value#${id}FieldUpdated"
+    placeholder="${this.options[`${id}_label`]}"
+    data-index="${index}"
+    ${this[`${id}InputDisabled`] ? "disabled='disabled'" : ''}
+    value="${this.escapeAttribute(inputValue)}"
+  />
+</div>`
+  }
+
   escapeAttribute(str) {
     if (str === null || str === undefined) return ''
     return String(str)
@@ -160,47 +177,34 @@ export default class extends Controller {
       .replace(/>/g, '&gt;')
   }
 
-  inputField(id = 'key', index, key, value) {
-    const inputValue = id === 'key' ? key : value
-
-    return `<input
-  class="${this.options.inputClasses} focus:bg-gray-100 !rounded-none border-gray-600 border-r border-l-0 border-b-0 border-t-0 focus:border-gray-300 w-1/2 focus:outline-none outline-none key-value-input-${id}"
-  data-action="input->key-value#${id}FieldUpdated"
-  placeholder="${this.options[`${id}_label`]}"
-  data-index="${index}"
-  ${this[`${id}InputDisabled`] ? "disabled='disabled'" : ''}
-  value="${this.escapeAttribute(inputValue)}"
-/>`
-  }
-
   deleteButton(index) {
     return `<a
-              href="javascript:void(0);"
-              data-key-value-index-param="${index}"
-              data-action="click->key-value#deleteRow"
-              title="${this.options.delete_text}"
-              data-tippy="tooltip"
-              data-button="delete-row"
-              tabindex="-1"
-              ${this.options.disable_deleting_rows ? "disabled='disabled'" : ''}
-              class="flex items-center justify-center p-2 px-3 border-none ${this.options.disable_deleting_rows ? 'cursor-not-allowed' : ''}"
-            ><svg class="pointer-events-none text-gray-500 h-5 hover:text-gray-500" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg></a>`
+      href="javascript:void(0);"
+      data-key-value-index-param="${index}"
+      data-action="click->key-value#deleteRow"
+      title="${this.options.delete_text}"
+      data-tippy="tooltip"
+      data-button="delete-row"
+      tabindex="-1"
+      ${this.options.disable_deleting_rows ? "disabled='disabled'" : ''}
+      class="key-value__action-button ${this.options.disable_deleting_rows ? 'cursor-not-allowed' : ''}"
+      >
+        <svg class="key-value__action-icon" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
+    </a>`
   }
 
   dndIcon(index) {
-    return `<div class="flex flex-col">
-      <a
-        href="javascript:void(0);"
-        data-key-value-index-param="${index}"
-        data-control="dnd-handle"
-        title="${this.options.reorder_text}"
-        data-tippy="tooltip"
-        tabindex="-1"
-        class="flex items-center justify-center py-0 px-2 border-none h-full ${this.options.disable_deleting_rows ? 'cursor-not-allowed' : ''}"
-        >
-          <svg class="pointer-events-none text-gray-500 h-4 hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /></svg>
-      </a>
-    </div>`
+    return `<a
+      href="javascript:void(0);"
+      data-key-value-index-param="${index}"
+      data-control="dnd-handle"
+      title="${this.options.reorder_text}"
+      data-tippy="tooltip"
+      tabindex="-1"
+      class="key-value__action-button key-value__action-button--drag ${this.options.disable_deleting_rows ? 'cursor-not-allowed' : ''}"
+      >
+        <svg class="key-value__action-icon key-value__action-icon--small" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /></svg>
+    </a>`
   }
 
   setOptions() {

data/app/javascript/js/controllers/fields/panel_refresh_controller.js

@@ -5,6 +5,10 @@ export default class extends Controller {
     const frame = this.context.scope.element.closest('turbo-frame')
     this.element.querySelector('svg').classList.add('animate-spin')
     if (frame) {
+      frame.classList.add('opacity-50')
+      frame.addEventListener('turbo:frame-load', () => {
+        frame.classList.remove('opacity-50')
+      }, { once: true })
       frame.reload()
     } else {
       console.error(

data/app/javascript/js/controllers/fields/tags_field_controller.js

@@ -126,10 +126,10 @@ export default class extends Controller {
   }
 
   hideFakeInput() {
-    this.fakeInputTarget.classList.add('hidden')
+    this.fakeInputTarget.classList.add('!hidden')
   }
 
   showRealInput() {
-    this.inputTarget.classList.remove('hidden')
+    this.inputTarget.classList.remove('!hidden')
   }
 }