Crop first area are wrong when "Always expand crop area" is set to "YES"

After more improvements/Tests, I finally found the real problem ahead this bug :D !! Infact this problem appear when user enable the option "show_crop_area" (Always expand crop area)... When this option we have an error on InitializeCropper. This reduce drasticaly the futur fix :D

Hi @markcarver,

I need your specialist opinion about my analysis of that bug... I suppose that is not due to refactor because with the new approach we seems to be verry linked with Drupal events to initialize/destroy objects. But with these option we "enforce" the detail element to "open" with element attribute like :

      $element['crop_wrapper'] = [
        '#type' => 'details',
        '#title' => t('Crop image'),
        '#attributes' => [
          'class' => ['image-data__crop-wrapper'],
          'data-drupal-iwc' => 'wrapper',
        ],
        '#open' => $element['#show_crop_area'],
        '#weight' => 100,
      ];

It's possible to that method aren't compatible with our more precise approach and our js for wathever reason not are corretly initialized because the element are suppose to be hidden ? I think we can try to send data-attributes like others configuration to Js ImageWidgetCrop object and open details element with even appropried (I'm not sure with that...).

Edit : I can confirm if we comment "'#open' => $element['#show_crop_area']," All works good ... We will try to found another solution to open this details element.

After more effort to understand, I think this is it

  /**
   * Creates a poll that checks visibility of an item.
   *
   * @param {HTMLElement|jQuery} element
   *   The element to poll.
   *
   * @todo Perhaps replace once vertical tabs have proper events?
   *
   * @see https://www.drupal.org/node/2653570
   */
  Drupal.ImageWidgetCropType.prototype.pollVisibility = function (element) {
    var $element = $(element);
    var value = null;
    var interval = setInterval(function () {
      var visible = $element.is(':visible');
      if (value !== visible) {
        $element.trigger((value = visible) ? 'visible.iwc' : 'hidden.iwc');
      }
    }, 250);
    this.intervals[interval] = $element;
  };

When we are on Add context and details element set to open, We never match with "value = visible" case. That can be usefull to understand it ?

Edit : To help more I past another screenshot with that :

  /**
   * Creates a poll that checks visibility of an item.
   *
   * @param {HTMLElement|jQuery} element
   *   The element to poll.
   *
   * @todo Perhaps replace once vertical tabs have proper events?
   *
   * @see https://www.drupal.org/node/2653570
   */
  Drupal.ImageWidgetCropType.prototype.pollVisibility = function (element) {
    var $element = $(element);
    var value = null;
    var interval = setInterval(function () {
      var visible = $element.is(':visible');
      if (value !== visible) {
        console.log((value = visible));
        $element.trigger((value = visible) ? 'visible.iwc' : 'hidden.iwc');
      }
    }, 250);
    this.intervals[interval] = $element;
  };

To try compare add context and edit context but nothing seems different *_* I don't understand why my last track are wrong again ;'(

@markcarver Do youi have an idea of this problem ? (I admit I didn't found solutions to avoid this problem) The better I can do is add more describe of problems and analize to help you :( sorry.

Hi guys,

I'm glad to see you in that issue :) !! I was read all comments and learn a lot thank you ! :) Now I understand more the problem and the limitation of is_visible :)

@markcarver I have tested all cases possible and WORKS !!!! GOD :) all work like a charm :) THANKS to you guys !

Merged in 8.x.2-x :) We are ready to stable release now.