Unexpected behavior with (setf (checkedp ...))

[aykaramba]

1) Problem definition - I am testing lexical scope with check boxes. I created 5 check boxes, stored them in an array and I created a simple button that loops over the array and checks if a checkbox is checked. If check boxes are checked we uncheck them, otherwise we check them.

2) Expected behaviour - If some boxes are checked uncheck the checkbox, otherwise check the rest. If all boxes are unchecked, check all boxes. If all boxes checked, uncheck them.

3) Purpose - To test lexical scope and logic of the loop.

.. however, there is a problem:

4) PROBLEM: The moment that a user manually interacts (checks / unchecks) a checkbox, the loop will successfully loop over the array but the "(setf (checkedp (..)) t) stops working. The array is full, the loop loops over the array, i can get the array length, but simple user interaction disables the ability of the loop to change the state of the check box. I cannot figure why this is happening with the IF operator.

5) SAMPLE - I created a tiny example project for the issue here for a quick look: https://github.com/aykaramba/zzz01

6) SAMPLE - Video demonstration of the behaviour:

399141548-219efb61-36fc-4cfd-8623-3b898a02cd80.mp4

7) SAMPLE - If it is simpler, a quick look at the code testing this behaviour here:

(defpackage #:zzz01
  (:use #:cl #:clog #:clog-web)
  (:export start-app))

(in-package :zzz01)

(defun start-app ()
  (initialize 'on-new-window
   :static-root (merge-pathnames "./www/"
                  (asdf:system-source-directory :zzz01)))
  (open-browser))

(defun on-new-window (body)
  (let* ((parent body)		     
	 (ndivs  5) ;; number of check boxes		     
	 (divs   (make-array ndivs)) ;; array of check boxes
	 (checkboxes (create-div parent)) ;; check boxes
	 (button (create-button parent :content "Check boxes")) ;; button
	 (notifications (create-div parent :content "Loop through array." :class "w3-light-gray w3-padding w3-margin")) ;; div to print notificaitons
	 (notifications-length (create-div parent :content "Length of array" :class "w3-light-gray w3-padding w3-margin")) ;; div to print notificaitons
	 (collection) ;; var to store number of loops done by the button
	 )                              
    ;; create some check boxes
    (dotimes (n ndivs) (progn (setf (aref divs n) (create-form-element checkboxes :checkbox  :class "w3-check  w3-quarter w3-green"))))
    ;; create a new line
    (create-br parent)
    ;; create a button
    (set-on-click button
		  (lambda (obj)
		    "On click loop through our array and reset text"
		    (declare (ignore obj))
		    (setf collection nil) ;; set counter to nil
		    (setf (text notifications) " " ) ;; set notifications to nil
		    (setf (text notifications-length)  (format nil "Length of array: ~a" (length divs))) ;; display length of array
		    (dotimes (n ndivs) ;; loop by number of checkboxes
		      (if (checkedp (aref divs n)) ;; check of check boxes are checked in array
			  (progn (setf collection (concatenate 'string (print collection)   " " (write-to-string n) " ")) ;; update visual counter
				 (setf (text notifications) collection) ;; display visual counter
				 (setf (checkedp (aref divs n)) nil)) ;; if checked, uncheck each checkbox array
			  (progn (setf collection (concatenate 'string (print collection)   " " (write-to-string n) " ")) ;; update visual counter
				 (setf (text notifications) collection) ;; display visual counter
				 (setf (checkedp (aref divs n)) t)))))))) ;;otherwise, check each check box in array

QUESTION - Why would (setf (checkedp ..)) no longer be able to modify the item in the array once a user checks / unchecks a box?

[ghost]

This looks to be a bug. (setf (checkedp obj) value) changes the attribute of the element, see clog-form.lisp:L694 It probably should be changing the value of the element property instead. According to: <input> - checked and HTMLInputElement.checked changing the attribute doesn't constitute changing the state of the checkbox. The presence of the attribute indicates the default checked state only on page load, and the attribute proxy is the 'checkedDefault' property not 'checked' as the code expects.

[ghost]

As a workaround you can instead use (setf (clog:property clog-obj "checked") t) . Hope it helps :)

[aykaramba]

Oh wow, that works. Did not know about that. Leveling up my debugging skills with this suggestion. Thank you very kindly! Much appreciate you taking the time to review.

Huh. So it is a bug. Will be submitting the bug shortly.

[aykaramba]

Just dropping in to update this thread:

Here are ways to update a check box confirmed working:

;; check a box
(setf (clog:property x "checked") t)

;; uncheck a box
(setf (clog:property x "checked") "")

The reason that uncheck works is because, apparently this is how check boxes work:

1. This is a valid checkbox:

<input type="checkbox"  checked > 

2. These are valid checkboxes that are unchecked:

<input type="checkbox" >
<input type="checkbox"  ANY-SPELLING-ERROR-checked >

Maybe this is why the defgeneric works the way it does? Interesting edge case perhaps, glad there is a workaround. Thanks for the hint.

[aykaramba]

Hi!

Oh, you edited your post. Just a heads up, while I appreciate it I also appreciate the direct communication. I did not respond because I needed to try to fully understand your comment. I believe I understand what you are saying.

However, the problem is that this does not work:

(setf (clog:property x "checked") nil)

What would be the proper way to set the false value in a lispy way?

I appreciate the follow up and feedback. The way you explain what is going on is forcing me to read more documentation and think about what is going on in a more clear way.

[ghost]

Hmmm, according to clog-base.lisp#L406, the property setter takes a string as a value. Which I didn't expect, and is somewhat constraining. I mistakenly assumed that the method was translating t/nill into JS equivalent boolean values. The only option currently is to use the empty string to indicate a falsy value and a string with characters to indicate a truthy value.

[ghost]

We can rectify this for now by creating our own setter, here is an option that uses Parenscript, which will translate T and NIL but also supports true/false/undefined strings integers, etc.

(defun (setf checked-p) (value clog-obj)
  (execute clog-obj (ps* `(setf checked ,value))))

Use it like this:

(let ((el (create-form-element body "checkbox")))
  (setf (checked-p el) t)
  (setf (checked-p el) nil)
  (setf (checked-p el) 'true)
  (setf (checked-p el) 'false))

And a more general version:

(defun (setf property) (value clog-obj property)
  (execute clog-obj (ps* `(setf ,property ,value))))

(let ((el (create-form-element body "checkbox")))
  (setf (property el 'checked) 'false)
  (setf (property el 'class-name) "primary")
  ;; We get property chaining for free with Parenscript
  (setf (property el '(chain style height)) "20px")
  (setf (property el 'style.width) "20px"))

Chaining properties using the dot operator is technically deprecated, but I like it.

[aykaramba]

I am grateful for all of your feedback and taking the time to provide additional code. I did not expect that, however, it is not only providing a workaround it is moving me closer to being able to fix bugs. I understand what is going on there.

Thank you very kindly.

[ghost]

You're welcome. I was also confused by the difference between attributes and properties initially. Funnily enough, both types are called attributes, but the ones we call attributes are 'content attributes' and properties are called 'IDL attributes'. It's also of no help when there are abstraction layers between you and the thing you're trying to understand (bugs notwithstanding).