hideUserInputOnNoneTextInput with checkboxes failure

[nuFaqtz]

Hi Felix,

I'm having the same trouble as #165 with a checkbox group.
If you change the code for:

if (cf.UserInputElement.hideUserInputOnNoneTextInput) {
   ...

to

if (cf.UserInputElement.hideUserInputOnNoneTextInput) {
	// toggle userinput hide
	if (this.controlElements.active) {
		// But only if it does not interfere with the flow, i.e. with a file control and/or checkboxes
		var isFlowRequired = this._currentTag.type === "file" || (this._currentTag.elements && this._currentTag.elements[0].type === "checkbox");
		if (isFlowRequired) {
			this.el.querySelector("cf-input-button").classList.add("isFlowRequired");
		}
		this.el.classList.add("hide-input");

		// set focus on first control element (when not prevented)
		if (!cf.UserInputElement.preventAutoFocus) {
			this.controlElements.focusFrom("bottom");
		}
	}
	else {
		this.el.classList.remove("hide-input");
		this.el.querySelector("cf-input-button").classList.remove("isFlowRequired");
	}
}

and modify the css for the cf-input-button to:

cf-input.hide-input input,
cf-input.hide-input textarea {
    /* We need it to take space for the button to stay on its own line*/
    visibility: hidden;
}

cf-input.hide-input cf-input-button:not(.isFlowRequired) {
    display: none;
}

Then in those cases you're left with only the button on the right, which works well (enough).
One could argue that maybe centring the button (with label) would be even better, but for now this works.

Edit
Have to figure something out for the error messages in these cases. Working on something generic, independent from the input.
Will let you know when and what I have something that works.
Edit

P.S. I noticed that the first item is auto selected when the input is hidden, but that should not be the case when the user has prevented auto focus.

mzZzl,
JamBo

[nuFaqtz]

Hi again,

Created a solution for the error messages.
This works generically and will allow for longer (multi-line) error messages.
Its easy to style (colour, size etc.), change:

// cf-error
this.inputElement.setAttribute("placeholder", dto.errorText || this._currentTag.errorMessage);
...
}, cf.UserInputElement.ERROR_TIME);

to:

// cf-error
var timerFunction = function () {
	clearTimeout(_this.errorTimer);
	_this.disabled = false;
	console.log('option, disabled 1');
	_this.el.removeAttribute("error");
	_this.errorBubble.parentNode.removeChild(_this.errorBubble);
	_this.inputElement.value = _this.inputElement.getAttribute("data-value");
	_this.inputElement.setAttribute("data-value", "");
	_this.setPlaceholder();
	_this.setFocusOnInput();
	//TODO: reset submit button..
	_this.submitButton.reset();
	if (_this.controlElements)
		_this.controlElements.resetAfterErrorMessage();
};

// An existing bubble?
this.errorBubble = this.cfReference.chatList.el.querySelector("#cf-error-bubble");
if (this.errorBubble) {
	this.errorBubble.parentNode.removeChild(this.errorBubble);
}

this.errorBubble = document.createElement("div");
// Set the properties
this.errorBubble.setAttribute("data-cf-bubble", dto.errorText || this._currentTag.errorMessage);
this.errorBubble.id = "cf-error-bubble";
this.errorBubble.classList.add("cf-bubble", "cf-bubble-always", "cf-bubble-rounded", "cf-bubble-error", "cf-bubble-top");
// Add the bubble
this.cfReference.chatList.el.appendChild(this.errorBubble);
// Hide it when clicked/tapped
this.errorBubble.addEventListener("click", function (e) {
	timerFunction();
}, false);

clearTimeout(this.errorTimer);
// remove loading class
this.submitButton.loading = false;
this.errorTimer = setTimeout(function () {
	timerFunction();
}, cf.UserInputElement.ERROR_TIME);

and add the following css:

/* For the error bubble */
.cf-bubble {
    z-index: 9999;
}

[data-cf-bubble] {
    position: absolute;
    display: inline-block;
    pointer-events: none;
    margin-top: 1rem;
    width: 80%;
    left: 10%;
}

    [data-cf-bubble]:before,
    [data-cf-bubble]:after {
        position: absolute;
        transform: translate3d(0, 0, 0);
        visibility: hidden;
        opacity: 0;
        z-index: 999;
        pointer-events: none;
        transition: 0.3s ease;
        transition-delay: 0ms;
    }

    [data-cf-bubble]:hover:before,
    [data-cf-bubble]:hover:after,
    input:focus ~ [data-cf-bubble]:before,
    input:focus ~ [data-cf-bubble]::after {
        visibility: visible;
        opacity: 1;
    }

    [data-cf-bubble]:hover:before,
    [data-cf-bubble]:hover:after {
        transition-delay: 100ms;
    }

    [data-cf-bubble]:before {
        content: '';
        position: absolute;
        background: transparent;
        border: 6px solid transparent;
        z-index: 1000001;
    }

    [data-cf-bubble]:after {
        content: attr(data-cf-bubble);
        background: #383838;
        color: white;
        padding: 8px 10px;
        font: 12px/1.416666667 'Helvetica Neue', sans-serif;
        cursor: pointer;
        pointer-events: all;
        white-space: pre-wrap;
        word-wrap: break-word;
    }

    [data-cf-bubble]:after {
        text-shadow: 0 -1px 0 black;
        box-shadow: 2px 2px 4px rgba(0,0,0,.3);
    }

/**
 * top bubble
 */
.cf-bubble-top:before {
    border-top-color: #383838;
    margin-bottom: -12px;
}

.cf-bubble-top:after {
    margin-left: 0;
}

.cf-bubble-top:before,
.cf-bubble-top:after {
    bottom: 100%;
    left: 0;
}

.cf-bubble-top:hover:after,
.cf-bubble-top:hover:before,
.cf-bubble-top:focus:after,
.cf-bubble-top:focus:before {
    transform: translateY(-8px);
}

/**
 * Error
 */
.cf-bubble-error:after {
    background-color: #b34e4d;
    text-shadow: 0 -1px 0 #592726;
    min-width: 60%;
}

.cf-bubble-error.cf-bubble-top:before {
    border-top-color: #b34e4d;
    left: 10%;
}

/**
 * Always show
 */
.cf-bubble-always:after,
.cf-bubble-always:before {
    opacity: 1;
    visibility: visible;
}

.cf-bubble-always.cf-bubble-top:after,
.cf-bubble-always.cf-bubble-top:before {
    transform: translateY(-8px);
}

/**
 * Rounded corners
 */
.cf-bubble-rounded:after {
    border-radius: 7px;
}

Works at my end; tested with several controls and messages (lengths).
I increased the ERROR_TIME to 5000 so the user has some time to read, click/tap on the bubble will remove it. Sorry for the long post(s).

mzZzl,
JamBo

[felixknox]

@nuFaqtz sounds great, do you have a working example of this?

[nuFaqtz]

Felix,

I do.
How to get to you?

What I did was getting the latest dev zip.
Taking the validation example, making all file refs local. Modified according to changes above.
And replaced the gender radio buttons into checkboxes.
But I'm happy to get a zip to you.

Let me know
mzZzl,
JamBo