Forums

C5-8.3: font picker in add block form dialog submits form instead of selecting font

Permalink
I want to use the Google Font Picker (https://www.npmjs.com/package/font-picker... ) in the Add Block form dialog. But when I click on the font picker select, it submits the form instead of simply selecting the font. Seems like a JS conflict between the font picker select event and the form dialog submit.

form.php:
<div class="form-group">
    <?php
    echo $form->label('font', t('Select text font family'));
    ?>
    <div id="font-picker"></div>
</div>
<div class="form-group">
    <p class="apply-font">Text preview</p>
</div>
<script>
$(function(){    
    const fontPicker = new FontPicker(
    'Google-API-key', // Google API key
    'Open Sans', // default font
    {limit: 50}, // additional options
Viewing 15 lines of 18 lines. View entire code block.


Anyone know how to fix that?

Thank you.
linuxoid
 
mnakalay replied on at Permalink Reply
mnakalay
Hello,
If you could attach the whole block or package to your post, it would make things easier so we don't have to try and build it ourselves :)
linuxoid replied on at Permalink Reply
linuxoid
I've sent you the package.

If I do this:
$("form").on("click", ":submit", function(e) {
        if (e.target != $('#ccm-form-submit-button')) 
        {
            e.preventDefault();
        }
        else 
        {
            $(this).trigger('submit');
        }
    });

it allows me to select the font but then prevents the add block form submission (saving the form). I'm close but something's not quite right...
mnakalay replied on at Permalink Reply
mnakalay
I'm having a loo. Although your approach is clever, I think you will have fewer problems down the line if we find the real reason and fix it rather than use a hack.
linuxoid replied on at Permalink Reply
linuxoid
I tried this:
$('#ccm-block-form').on("click", ":submit", function(e) {
    if (e.target.id !== 'ccm-form-submit-button')
    {
        e.preventDefault();
    }
    else 
    {
        $(this).trigger('submit');
    }
});

both the font can be selected and then the form can be submitted. But one issue - the form is now submitted twice!
mnakalay replied on at Permalink Reply
mnakalay
In your script, line 648 you have
// HTML for dropdown button (name of active font and dropdown arrow)
this.dropdownButton = document.createElement('button');
this.dropdownButton.classList.add('dropdown-button');

add one line to set the button's type like this
// HTML for dropdown button (name of active font and dropdown arrow)
this.dropdownButton = document.createElement('button');
this.dropdownButton.setAttribute('type', 'button');
this.dropdownButton.classList.add('dropdown-button');

The explanation is that when a button is added to a page, the browser will link it automatically to the closest form. Thanks to that you can have a submit button outside a form and still submit the form.

Anyway, by specifying that this button is of type "button" it can't be mistaken for a submit button and it solves the problem.
linuxoid replied on at Permalink Reply
linuxoid
No, that doesn't work. As soon as I click on the select, it saves and closes the form
linuxoid replied on at Permalink Reply
linuxoid
I removed the 'else' and now it works fine:
$('#ccm-block-form').on("click", ":submit", function(e) {
    if (e.target.id !== 'ccm-form-submit-button')
    {
        e.preventDefault();
    }
});
mnakalay replied on at Permalink Reply
mnakalay
When I implemented my solution by giving the button a type, it did solve the problem. But I had first deleted your code so maybe that's why it didn't work for you. That or you have something else at play.

The problem with your solution is that it really doesn't look full proof. For instance, what happens if the button has the focus and I push enter on my keyboard instead of clicking?
linuxoid replied on at Permalink Reply
linuxoid
I have commented out all my code, added your line, but nothing changed, I still have the form being submitted on clicking the select.
mnakalay replied on at Permalink Reply
mnakalay
I don't know what to say about that, it worked for me. You might have something else at play here. Maybe an unrelated piece of code somewhere else.