fix(chosen-dropdown): prevent display bug in Chosen select fields

[raftaar1191]

Issue Overview

UI getting break when viewing Donation single page dashboard

Video Link: https://screencast-o-matic.com/watch/cFnjjVoC4P

Notes

It's working perfect in Give Core 2.0.2 but it's not working in Give Core 2.0.3

Expected Behavior

UI should not get break

Current Behavior

UI getting break

Todos

• Tests
• Documentation

WordPress Environment

``` ### WordPress Environment ###

Home URL: http://give18.local
Site URL: http://give18.local
WP Version: 4.9.4
WP Multisite: –
WP Memory Limit: 256 MB
WP Debug Mode: ✔
WP Cron: ✔
Language: en_US
Permalink Structure: /%postname%/
Show on Front: posts
Table Prefix Length: wpgive_
Table Prefix Length: 7
Table Prefix Status: Acceptable
Admin AJAX: Accessible
Registered Post Statuses: publish, future, draft, pending, private, trash, auto-draft, inherit, refunded, failed, revoked, cancelled, abandoned, processing, preapproval

Server Environment

Hosting Provider: DBH: localhost, SRV: give18.local
TLS Connection: Connection uses TLS 1.2
TLS Connection: Probably Okay
Server Info: nginx/1.10.1
PHP Version: 7.0.3
PHP Post Max Size: 1,000 MB
PHP Time Limit: 900
PHP Max Input Vars: 3000
PHP Max Upload Size: 1,000 MB
cURL Version: ❌ 7.38.0, OpenSSL/1.0.1t - We recommend a minimum cURL version of 7.40.
SUHOSIN Installed: –
MySQL Version: ❌ 5.5.55 - We recommend a minimum MySQL version of 5.6. See: WordPress Requirements
Default Timezone is UTC: ✔
fsockopen/cURL: ✔
SoapClient: ✔
DOMDocument: ✔
gzip: ✔
GD Graphics Library: ✔
Multibyte String: ✔
Remote Post: ✔
Remote Get: ✔

Give Configuration

Give Version: 2.0.3
Give Cache: Enabled
Database Updates: All DB Updates Completed.
Give Cache: Enabled
Give Cache: ✔New Donation✔Donation Receipt✔New Offline Donation✔Offline Donation Instructions✔New User Registration✔User Registration Information✔Email access
Upgraded From: –
Test Mode: Enabled
Currency Code: USD
Currency Position: Before
Decimal Separator: .
Thousands Separator: ,
Success Page: http://give18.local/donation-confirmation/
Failure Page: http://give18.local/donation-failed/
Donation History Page: http://give18.local/donation-history/
Give Forms Slug: /donations/
Enabled Payment Gateways: PayPal Standard, Test Donation, Offline Donation
Default Payment Gateway: PayPal Standard
PayPal IPN Verification: Enabled
PayPal IPN Notifications: N/A
Donor Email Access: Enabled

Session Configuration

Give Use Sessions: Enabled
Session: Disabled

Active Give Add-ons

Other Active Plugins

Give - Development Plugin: by Raftaar1191 – 1.0.0
Loco Translate: by Tim Whitlock – 2.0.17

Inactive Plugins

Duplicate Post: by Enrico Battocchi – 3.2.1
Give - 2Checkout Gateway: by WordImpress – 1.0.2
Give - Authorize.net Gateway: by WordImpress – 1.3.2
Give - AWeber: by WordImpress – 1.0.2
Give - Braintree Gateway: by WordImpress – 1.1.1
Give - CCAvenue Gateway: by WordImpress – 1.0
Give - ConvertKit: by WordImpress – 1.0.1
Give - CSV Toolbox: by WordImpress – 1.0
Give - Display Donors: by WordImpress, LLC – 1.0
Give - Dwolla Gateway: by WordImpress – 1.1.2
Give - Email Reports: by WordImpress – 1.0
Give - Fee Recovery: by WordImpress – 1.3.8
Give - Form Countdown: by WordImpress – 1.0
Give - Form Field Manager: by WordImpress – 1.2.6
Give - Gift Aid: by WordImpress – 1.1
Give - Google Analytics Donation Tracking: by WordImpress – 1.1.1
Give - MailChimp: by WordImpress – 1.3.7
Give - Manual Donations: by WordImpress – 1.2.2
Give - Paymill Gateway: by WordImpress – 1.1
Give - PDF Receipts: by WordImpress – 2.2.4
Give - Recurring Donations: by WordImpress – 1.5.4
Give - Stripe Gateway: by WordImpress – 1.5.2
Give - Tributes: by WordImpress – 1.3.6
WooCommerce: by Automattic – 3.2.6
WP Hide & Security Enhancer: by Nsp Code – 1.4.7.6
WPS Hide Login: by Remy Perona for WPServeur – 1.2.1

Active MU Plugins

wp-hide-loader.php: by –

Theme

Name: Twenty Fifteen
Version: 1.9
Author URL: https://wordpress.org/
Child Theme: No – If you're modifying Give on a parent theme you didn't build personally, then we recommend using a child theme. See: How to Create a Child Theme

</details>

[mehul0810]

@raftaar1191 I've got this issue twice but never able to reproduce it after then. However, this issue is related to chosen fields and can be noticed wherever chosen field is used. Hence, while testing this issue make sure you test all the chosen fields even in the settings page.

[mehul0810]

@raftaar1191 As discussed over the call, this issue can be reproduced when we run gulp for release/2.0.3. So, there might be some conflict occurs in the JS when we run gulp.

[raftaar1191]

@DevinWalker @mehul0810 @ravinderk

This issues getting created because bower is updating chosen plugin in which some dom (HTML) changes had been made.

[ravinderk]

@raftaar1191 closing this issue for now. Let me know if you still able to reproduce this without updating the chosen plugin.

Call Member: @mehul0810, @raftaar1191 and me
Call summary: I showed @mehulgohil and @deepak that issue is not major. This is happening because bower is updating the chosen plugin in which some dom changes occurred.

[DevinWalker]

Somehow this bug was released in 2.0.4 - after researching I'm seeing it in the WP.org repo release: https://goo.gl/Vs2n23

[DevinWalker]

See PR above for explanation.