b-form-tags id cannot start with numbers

[DM2489]

Describe the bug

When using the b-form-tags component, if you use an id or input-id that starts with a number, it throws a DOMException when attempting to add a new tag.

Steps to reproduce the bug

1. Go to The tags docs (https://bootstrap-vue.org/docs/components/form-tags)
2. Click on the first live example, add a number to the start of the id prop (1-tags-basic)

<template>
  <div>
    <label for="tags-basic">Type a new tag and press enter</label>
    <b-form-tags input-id="1-tags-basic" v-model="value" class="mb-2"></b-form-tags>
    <p>Value: {{ value }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: ['apple', 'orange']
      }
    }
  }
</script>

3. Type a new tag and press enter.
4. Note that the tag is not added. Open dev tools and observe the console error.

Expected behavior

As per HTML5 specs (https://html.spec.whatwg.org/multipage/dom.html#the-id-attribute), digits should be usable in the id of input elements. The component's id and input-id should allow for this.

Versions

Libraries:

• BootstrapVue: 2.6.1
• Bootstrap: 4.4.1
• Vue: 2.6.10

[DM2489]

It should be noted that you can work around this by moving the number to the end (input-id="tags-input-1"), though this isn't ideal in all cases.

[jacobmllr95]

From the W3C documentation Attribute selectors syntax:

Attribute values must be a valid CSS identifiers or String.

• 1-tags-basic => invalid
• tags-basic-1 => valid

[DM2489]

Huh. Odd that it's not okay to use numbers at the start in selectors, but fine on the definition of the id itself. Oh well, thanks for the correction.