Fix radio update issue

config/bs-config.js

@@ -95,4 +95,4 @@ module.exports = {
         "gif": "img",
         "js": "script"
     }
-};
+}

src/lib/utils/element-creator.js

@@ -2,6 +2,7 @@ import ARR from './array-helper.js'
 import { mixVal } from './literals-mix.js'
 import initBinding from './binding.js'
 import { queue, inform, exec } from './render-query.js'
+import getEvent from './event-helper.js'
 
 const getElement = (tag, ref, refs) => {
 	const element = document.createElement(tag)
@@ -46,7 +47,27 @@ const addValListener = ({_handler, state, handlers, subscribers, innerData, elem
 		element.addEventListener('input', _update, true)
 		element.addEventListener('keyup', _update, true)
 		element.addEventListener('change', _update, true)
-	} else element.addEventListener('change', () => updateOthers({dataNode, handlerNode, subscriberNode, _handler, state, _key, value: element.checked}), true)
+	} else {
+		element.addEventListener('change', () => {
+			// Trigger change to the element it-self
+			element.dispatchEvent(getEvent('ef-change-event'))
+			if (element.tagName === 'INPUT' && element.type === 'radio' && element.name !== '') {
+				// Trigger change to the the same named radios
+				const radios = document.querySelectorAll(`input[name=${element.name}]`)
+				if (radios) {
+					const selected = Array.from(radios)
+					ARR.remove(selected, element)
+
+					/* Event triggering could cause unwanted render triggers
+					 * no better ways came up at the moment
+					 */
+					for (let i of selected) i.dispatchEvent(getEvent('ef-change-event'))
+				}
+			}
+		}, true)
+		// Use custom event to avoid loops and conflicts
+		element.addEventListener('ef-change-event', () => updateOthers({dataNode, handlerNode, subscriberNode, _handler, state, _key, value: element.checked}))
+	}
 }
 
 const getAttrHandler = (element, key) => {

src/lib/utils/event-helper.js

@@ -0,0 +1,13 @@
+/* Get new events that works in all target browsers
+ * though a little bit old-fashioned
+ */
+const getEvent = (name, props = {
+	bubbles: false,
+	cancelable: false
+}) => {
+	const event = document.createEvent('Event')
+	event.initEvent(name, props.bubbles, props.cancelable)
+	return event
+}
+
+export default getEvent

test/test.js

@@ -1,7 +1,7 @@
 var template = '\n' +
 '>div.{{class.text = box test}}\n' +
 '	#testattr\n' +
-' #emptyattr = {{empty}}\n'+
+' #emptyattr = {{empty}}\n' +
 '	#id = id1\n' +
 '	.text0\n' +
 '	>br\n' +
@@ -34,13 +34,16 @@ var template = '\n' +
 '			#type = radio\n' +
 '			#name = testradio\n' +
 '			%checked = {{testRadio1}}\n' +
+'		.checked: {{testRadio1}}\n' +
 '		>input\n' +
 '			#type = radio\n' +
 '			#name = testradio\n' +
 '			%checked = {{testRadio2}}\n' +
+'		.checked: {{testRadio2}}\n' +
 '		>input\n' +
 '			#type = checkbox\n' +
 '			%checked = {{testCheck}}\n' +
+'		.checked: {{testCheck}}\n' +
 '		>br\n' +
 '		.Input style here: \n' +
 '		>br\n' +