Hi Kunena team,I would like to share two issues I found with polls in Kunena 6.x and the fixes I applied on my Joomla 5 website. Maybe they can be useful for future releases.1) "See less" button breaks "Show more" voters list
Issue:In the poll results, when there are more than 5 voters, the "Show more" link works correctly and expands the full voters list.However, after clicking "See less", the extra users are hidden again, but the "Show more" button does not reappear. The only way to get it back is to reload the page.The cause was a wrong anchor target in:
Code:
components/com_kunena/template/aurelia/layouts/topic/poll/results/default.php
The generated HTML contained:
Code:
<a href="#kpoll-lesssers-span" class="link-show-extra-users" id="kpoll-lessusers">
There was a typo (
instead of
) and the anchor was also unnecessary because the JavaScript handles the visibility.I solved it by overriding the Kunena JavaScript behavior from my template custom JS:
Code:
jQuery(document).ready(function ($) {
$(".link-show-extra-users").off('click').on('click', function (event) {
event.preventDefault();
if (!$(this).hasClass('link-show-more')) {
$("#kpoll-moreusers-span").hide();
$("#kpoll-moreusers").show();
$(this).hide();
} else {
$("#kpoll-moreusers").hide();
$("#kpoll-moreusers-span").show();
$("#kpoll-lessusers").show();
$(this).hide();
}
});
});
This also prevents the page from jumping because of the anchor.2) Poll expiration date picker not working
Issue:When creating a poll, the "Poll time to live" field no longer opens the date picker. Users have to manually enter the date.The date picker library itself was correctly loaded. The problem was in:
Code:
media/kunena/core/js/plugins/polls/dialogs/polls.js
The initialization code was:
Code:
var theInput = jQuery('#' + this.domId).find('input');
jQuery(theInput.attr('id')).datepicker({
showButtonPanel: true,
format: "yyyy-mm-dd",
todayHighlight: true,
autoclose: true
});
The issue is this line:
Code:
jQuery(theInput.attr('id'))
because
Code:
theInput.attr('id')
returns something like:
and jQuery interprets it as a tag selector, not as an ID selector.The correct code should be:
Code:
theInput.datepicker({
showButtonPanel: true,
format: "yyyy-mm-dd",
todayHighlight: true,
autoclose: true
});
or alternatively:
Code:
jQuery('#' + theInput.attr('id')).datepicker({
showButtonPanel: true,
format: "yyyy-mm-dd",
todayHighlight: true,
autoclose: true
});
Since I prefer not to modify Kunena core files, I fixed it with a template Custom JS override using a MutationObserver that detects when the CKEditor poll dialog is created and applies the datepicker correctly:
Code:
jQuery(function ($) {
const observer = new MutationObserver(function () {
const input = $('.cke_dialog_ui_labeled_label')
.filter(function () {
return $(this).text().includes('Poll time to live');
})
.closest('.cke_dialog_ui_text')
.find('input');
if (input.length && !input.hasClass('hasDatepicker')) {
input.datepicker({
showButtonPanel: true,
format: "yyyy-mm-dd",
todayHighlight: true,
autoclose: true
});
}
});
observer.observe(document.body, {
childList: true,
subtree: true
});
});
After this, the date picker works again normally.I hope this helps. Both issues seem relatively easy to fix in future releases.Thanks for your great work on Kunena!
