Fix delimiter highlighting in Firefox #27

input:first-line doesn't work in Firefox.
So, we use input background instead

src/components/DelimiterSelector.vue

@@ -8,12 +8,12 @@
     >
       <div class="value">
         <input
+          :class="{ 'filled': filled }"
           ref="delimiterInput"
           type="text"
           maxlength="1"
-          :value="value"
+          v-model="inputValue"
           @click.stop
-          @input.prevent="onInput($event)"
           :disabled="disabled"
         />
         <div class="name">{{ getSymbolName(value) }}</div>
@@ -33,7 +33,7 @@
         @click="chooseOption(option)"
         class="option"
       >
-        <span>{{option}}</span><div>{{ getSymbolName(option) }}</div>
+        <pre>{{option}}</pre><div>{{ getSymbolName(option) }}</div>
       </div>
     </div>
   </div>
@@ -51,9 +51,26 @@ export default {
   data () {
     return {
       showOptions: false,
-      options: [',', '\t', '|', ';', '\u001F', '\u001E']
+      options: [',', '\t', ' ', '|', ';', '\u001F', '\u001E'],
+      filled: false,
+      inputValue: ''
     }
   },
+  watch: {
+    inputValue () {
+      if (this.inputValue) {
+        this.filled = true
+        if (this.inputValue !== this.value) {
+          this.$emit('input', this.inputValue)
+        }
+      } else {
+        this.filled = false
+      }
+    }
+  },
+  created () {
+    this.inputValue = this.value
+  },
   methods: {
     getSymbolName (str) {
       if (!str) {
@@ -61,15 +78,8 @@ export default {
       }
       return ascii[str.charCodeAt(0).toString()].name
     },
-    onInput (event) {
-      const value = event.target.value
-
-      if (value) {
-        this.$emit('input', value)
-      }
-    },
     chooseOption (option) {
-      this.$emit('input', option)
+      this.inputValue = option
       this.showOptions = false
     },
     onContainerClick (event) {
@@ -78,7 +88,7 @@ export default {
 
     clear () {
       if (!this.disabled) {
-        this.$refs.delimiterInput.value = ''
+        this.inputValue = ''
         this.$refs.delimiterInput.focus()
       }
     }
@@ -108,6 +118,7 @@ export default {
 .value .name {
   color: var(--color-text-light-2);
   cursor: default;
+  margin-left: 4px;
 }
 
 .controls {
@@ -130,7 +141,6 @@ export default {
 .option {
   display: flex;
   align-items: center;
-  white-space: pre;
   height: 24px;
   padding: 0 6px;
 }
@@ -141,27 +151,30 @@ export default {
   cursor: pointer;
 }
 
-.option span {
+.option pre {
   background-color: var(--color-bg-warning);
-  line-height: 16px;
+  line-height: 20px;
-  letter-spacing: 6px;
   margin-right: 6px;
+  tab-size: 1;
+  font-family: monospace;
+  width: 16px;
+  text-align: center;
 }
 
 input {
   background: var(--color-white);
   border: none;
   color: var(--color-text-base);
-  height: 34px;
+  height: 20px;
+  font-family: monospace;
   font-size: 12px;
   box-sizing: border-box;
-  width: 20px;
+  width: 16px;
-  letter-spacing: 6px;
+  text-align: center;
-  line-height: 37px;
 }
 
-input::first-line {
+input.filled {
-  background-color: var(--color-bg-warning);
+  background: var(--color-bg-warning);
 }
 
 input:focus {

tests/components/DelimiterSelector.spec.js

@@ -4,17 +4,21 @@ import DelimiterSelector from '@/components/DelimiterSelector'
 
 describe('DelimiterSelector', async () => {
   it('shows the name of value', async () => {
-    const wrapper = shallowMount(DelimiterSelector, {
+    let wrapper = shallowMount(DelimiterSelector, {
       propsData: { value: ',' }
     })
     expect(wrapper.find('input').element.value).to.equal(',')
     expect(wrapper.find('.name').text()).to.equal('comma')
 
-    await wrapper.setProps({ value: '\t' })
+    wrapper = shallowMount(DelimiterSelector, {
+      propsData: { value: '\t' }
+    })
     expect(wrapper.find('input').element.value).to.equal('\t')
     expect(wrapper.find('.name').text()).to.equal('horizontal tab')
 
-    await wrapper.setProps({ value: '' })
+    wrapper = shallowMount(DelimiterSelector, {
+      propsData: { value: '' }
+    })
     expect(wrapper.find('input').element.value).to.equal('')
     expect(wrapper.find('.name').text()).to.equal('')
   })
@@ -90,4 +94,16 @@ describe('DelimiterSelector', async () => {
     await wrapper.findComponent({ name: 'drop-down-chevron' }).trigger('click')
     expect(wrapper.find('.options').isVisible()).to.equal(false)
   })
+
+  it('has filled class when input is not empty', async () => {
+    const wrapper = shallowMount(DelimiterSelector, {
+      propsData: { value: ',' }
+    })
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('input').classes()).to.include('filled')
+    await wrapper.find('input').setValue('')
+    expect(wrapper.find('input').classes()).to.not.include('filled')
+    await wrapper.find('input').setValue(';')
+    expect(wrapper.find('input').classes()).to.include('filled')
+  })
 })