3.0.3

- Fixed issue that prevented id selectors from allowing dots in the string.
- Fixed issue that prevented the clear field from dispatching an input event.

CHANGELOG.md

@@ -4,6 +4,11 @@
 
 - Put your changes here...
 
+## 3.0.3
+
+- Fixed issue that prevented id selectors from allowing dots in the string.
+- Fixed issue that prevented the clear field from dispatching an input event.
+
 ## 3.0.2
 
 - Added support for a single checkbox rather than a group of checkboxes.

package.json

@@ -2,7 +2,7 @@
   "name": "semantic-forms",
   "description": "Semantic Forms",
   "author": "Eric Newport <[email protected]>",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "files": [
     "semanticForms.css",
     "semanticForms.js",

semanticForms.html

@@ -114,20 +114,20 @@ <h1>Semantic Forms</h1>
               <dd><textarea id="prefilledtextarea" name="prefilledtextarea" rows="5" cols="50" placeholder="e.g. He just kept talking in one incredibly unbroken sentence moving from topic to topic so that no one had a chance to interrupt it was really quite hypnotic.">Some prefilled content...</textarea></dd>
             </dl>
 
-            <input type="submit" name="submit" value="Non-grouped submit button">
+            <input type="submit" name="button1" value="Non-grouped submit button">
             <input type="reset" name="reset" value="Another one">
 
             <p>Flexbox button layout pattern with two submit buttons:</p>
             <menu>
-              <li><button type="submit" name="submit">Button 1</button></li>
-              <li><button type="reset" name="reset">Button 2</button></li>
+              <li><button type="submit" name="button1">Button 1</button></li>
+              <li><button type="reset" name="button2">Button 2</button></li>
             </menu>
 
             <p>Flexbox button layout pattern with three submit buttons:</p>
             <menu>
-              <li><button type="submit" name="submit">Button 1</button></li>
-              <li><button type="reset" name="reset">Button 2</button></li>
-              <li><input type="submit" name="submit" value="Button 3"></li>
+              <li><button type="submit" name="button1">Button 1</button></li>
+              <li><button type="reset" name="button2">Button 2</button></li>
+              <li><input type="submit" name="button3" value="Button 3"></li>
             </menu>
           </fieldset>
         </form>
@@ -226,20 +226,20 @@ <h1>Semantic Forms</h1>
               <dd><textarea id="low-flow-prefilledtextarea" name="low-flow-prefilledtextarea" rows="5" cols="50" placeholder="e.g. He just kept talking in one incredibly unbroken sentence moving from topic to topic so that no one had a chance to interrupt it was really quite hypnotic.">Some prefilled content...</textarea></dd>
             </dl>
 
-            <input type="submit" name="submit" value="Non-grouped submit button">
+            <input type="submit" name="button1" value="Non-grouped submit button">
             <input type="reset" name="reset" value="Another one">
 
             <p>Flexbox button layout pattern with two submit buttons:</p>
             <menu>
-              <li><button type="submit" name="submit">Button 1</button></li>
-              <li><button type="reset" name="reset">Button 2</button></li>
+              <li><button type="submit" name="button1">Button 1</button></li>
+              <li><button type="reset" name="button2">Button 2</button></li>
             </menu>
 
             <p>Flexbox button layout pattern with three submit buttons:</p>
             <menu>
-              <li><button type="submit" name="submit">Button 1</button></li>
-              <li><button type="reset" name="reset">Button 2</button></li>
-              <li><input type="submit" name="submit" value="Button 3"></li>
+              <li><button type="submit" name="button1">Button 1</button></li>
+              <li><button type="reset" name="button2">Button 2</button></li>
+              <li><input type="submit" name="button3" value="Button 3"></li>
             </menu>
           </fieldset>
         </form>

semanticForms.js

@@ -50,9 +50,9 @@ window.semanticForms = function () {
                 dl.classList.add('floatLabelForm')
               }
               if (input.parentNode.parentNode.id && (type === 'checkbox' || type === 'radio')) {
-                label = document.querySelector('label[data-for=' + input.parentNode.parentNode.id + ']')
+                label = document.querySelector('label[data-for=' + input.parentNode.parentNode.id.replace(/\./g, '\\.') + ']')
               } else {
-                label = document.querySelector('label[for=' + input.id + ']')
+                label = document.querySelector('label[for=' + input.id.replace(/\./g, '\\.') + ']')
               }
               labelHTML = label.innerHTML
               if (type === 'checkbox' || type === 'radio') {
@@ -126,6 +126,8 @@ window.semanticForms = function () {
         clearfieldHorizontalOffset + clearfieldVerticalOffset > e.clientY - el.getBoundingClientRect().top
         ) {
           el.value = ''
+          el.dispatchEvent(new Event('input'))
+          el.form.dispatchEvent(new Event('input'))
           el.classList.remove('x')
           el.classList.remove('onX')
         }