@rajputanuj31 When you create a PR, why do you delete stuff which is prepared in the description, like e.g. the "Pull request for issue #..." at the top, or the section about documentation, which requires the right check boxes to be checked? We do not have that stuff for nothing in our pull request description template. So please add the Pull Request for issue #33637 to the top so we know for which issue the pull request is made, and add back the documentation section and check the right check boxes. Thanks in advance.

There are unrelated files in this pull request :(

There are unrelated files in this pull request :(

Fixed.

@rajputanuj31 can you check if the rtl languages need any adjustment? Other than that this seems ready for some testing

@rajputanuj31 can you check if the rtl languages need any adjustment? Other than that this seems ready for some testing

it's working fine.
@dgrammatiko could you please test this PR.

Please add some inline comments, so we can follow your code. Actually it is hard to understand what exactly is going on with all these if else conditions. I would also recommend that you do early return instead of so many else statements.

I have tested this and it works perfectly apart from on the first page which is very weird.

In this video I am shift clicking on the last image and then on the image before it and you will see that a third image is also selected. I can't replicate that on any other screen.

I have tested this and it works perfectly apart from on the first page which is very weird.

In this video I am shift clicking on the last image and then on the image before it and you will see that a third image is also selected. I can't replicate that on any other screen.

@brianteeman It's working perfectly in my local machine. what should I do now?
@dgrammatiko @laoneo can you please confirm this issue.

do you have exactly the same images as I have?

do you have exactly the same images as I have?

Yes I do have the same images.

do you have exactly the same images as I have?

Yes I do have the same images.

all three?

do you have exactly the same images as I have?

Yes I do have the same images.

all three?

Yes now I am also facing the same issue. I am trying to debug it.

@brianteeman @dgrammatiko @laoneo I found the reason for this behavior.
In Joomla media items storing index is different from index of item's being shown on browser section.
When an image or dir. name is starting with capital letter then it's storing index in array is different from what it's being displayed.

Carefully observe the index of Photo.jpg is stored as index of 4 but it's being displayed as if it is 5th index.
How do I get the Index's of the items being viewed in browser????

How do I get the Index's of the items being viewed in browser????

I intentionally renamed the items to localItems to make it obvious that the items in the browser component are localised, eg reordered. In short use the localItems:

@brianteeman @dgrammatiko @laoneo I have made some changes Please review it.

I have tested this item ✅ successfully on 005b0d6

@rajputanuj31 could you do a small refactoring here since we have the same code in 2 files.

Create a new file administrator/components/com_media/resources/scripts/components/browser/utils/utils.es6.js

export default {
  /**
   * Handle the click event
   * @param event
   * @param ctx  the context
   */
  onItemClick: (event, ctx) => {
    if (ctx.item.path && ctx.item.type === 'file') {
      window.parent.document.dispatchEvent(
        new CustomEvent('onMediaFileSelected', {
          bubbles: true,
          cancelable: false,
          detail: {
            path: ctx.item.path,
            thumb: ctx.item.thumb,
            fileType: ctx.item.mime_type ? ctx.item.mime_type : false,
            extension: ctx.item.extension ? ctx.item.extension : false,
            width: ctx.item.width ? ctx.item.width : 0,
            height: ctx.item.height ? ctx.item.height : 0,
          },
        }),
      );
    }

    if (ctx.item.type === 'dir') {
      window.parent.document.dispatchEvent(
        new CustomEvent('onMediaFileSelected', {
          bubbles: true,
          cancelable: false,
          detail: {},
        }),
      );
    }

    // Handle clicks when the item was not selected
    if (!ctx.isSelected()) {
      // Handle clicks when shift key was pressed
      if (event.shiftKey || event.keyCode === 13) {
        const currentIndex = ctx.localItems.indexOf(ctx.$store.state.selectedItems[0]);
        const endindex = ctx.localItems.indexOf(ctx.item);
        // Handle selections from up to down
        if (currentIndex < endindex) {
          ctx.localItems.slice(currentIndex, endindex + 1)
            .forEach((element) => ctx.$store.commit(types.SELECT_BROWSER_ITEM, element));
        // Handle selections from down to up
        } else {
          ctx.localItems.slice(endindex, currentIndex)
            .forEach((element) => ctx.$store.commit(types.SELECT_BROWSER_ITEM, element));
        }
        // Handle clicks when ctrl key was pressed
      } else if (event[/Mac|Mac OS|MacIntel/gi.test(window.navigator.userAgent) ? 'metaKey ' : 'ctrlKey'] || event.keyCode === 17) {
        ctx.$store.commit(types.SELECT_BROWSER_ITEM, ctx.item);
      } else {
        ctx.$store.commit(types.UNSELECT_ALL_BROWSER_ITEMS);
        ctx.$store.commit(types.SELECT_BROWSER_ITEM, ctx.item);
      }
      return;
    }
    ctx.$store.dispatch('toggleBrowserItemSelect', ctx.item);
    window.parent.document.dispatchEvent(
      new CustomEvent('onMediaFileSelected', {
        bubbles: true,
        cancelable: false,
        detail: {},
      }),
    );

    // If more than one item was selected and the user clicks again on the selected item,
    // he most probably wants to unselect all other items.
    if (ctx.$store.state.selectedItems.length > 1) {
      ctx.$store.commit(types.UNSELECT_ALL_BROWSER_ITEMS);
      ctx.$store.commit(types.SELECT_BROWSER_ITEM, ctx.item);
    }
  },
}

Then change the handleClick method in the item https://github.com/joomla/joomla-cms/pull/39824/files#diff-68de052c5527b63cd4fa16f4872cdeca97b20ac05389de587af9c8b14a698d50R126-R193 and 'onClick' in the row https://github.com/joomla/joomla-cms/pull/39824/files#diff-e3f0552dc23736cd5bd70c04dab063ad0c26e284be8542e0dad16b04d4c5da21R104-R162 to

    handleClick(event, item) {
      return onItemClick(event, item);
    },

and

    onClick(event, item) {
      return onItemClick(event, item);
    },

respectively. You need to import the onItemClick as usual: import { onItemClick } from '../utils/utils.es6.js';

@dgrammatiko Please have a look.

@dgrammatiko I have made all changes as you suggest. Is everything looks fine??

Is everything looks fine??

Nope, the build is broken, check the npm part on the CI: https://ci.joomla.org/joomla/joomla-cms/61729

@brianteeman @dgrammatiko Please test it. On my local machine it's working perfectly.

@dgrammatiko Please have a look. Is now everything looks correct?

@laoneo could you also review this one?

@dgrammatiko @laoneo @brianteeman please test the PR.

Hey @laoneo @dgrammatiko @brianteeman @Hackwar I think this PR is ready so please test it. If PR is not ready please leave a comment.

I have tested this item ? unsuccessfully on f971327

There is something wrong here. I applied the patch and ran npm ci (and even npm install). I am using Firefox on a Mac with 5.0.0-beta2-dev and I see no difference in the behaviour with the patch installed and hard page reload. The Ctrl key has no effect. I checked the code to see that all the patches were applied. On Mac/Firefox the Ctrl key brings up a browser dialog (Back, Reload, etc). I could not find a combination of keys that select/deselect an image that does not deselect previously selected images.

@rajputanuj31 can you look at the response by @ceford please?

@rajputanuj31 can you look at the response by @ceford please?

Its working perfectly in my local machine.
Screencast from 05-10-23 06:23:07 PM IST.webm

Mac ctrl (in this context) is the apple button (command)

I tested it and it didn't pass.
See video.
Windows PC
Chrome latest version
CTRL pressed

No prebuilt packages are available to test.

In about 10 minutes the packages should be available again.

I have tested this item ✅ successfully on b86e7d4

Comments:

• Select multiple items by holding command key
• Select all files between two selected files by holding shift key

Test System Information:

PHP Built On Darwin Air.local 23.6.0 Darwin Kernel Version 23.6.0: Mon Jul 29 21:13:00 PDT 2024; root:xnu-10063.141.2~1/RELEASE_X86_64 x86_64
Database Type mysql
Database Version 8.0.35
Database Collation utf8mb4_unicode_ci
Database Connection Collation utf8mb4_0900_ai_ci
Database Connection Encryption None
Database Server Supports Connection Encryption Yes
PHP Version 8.3.8
Web Server Apache/2.4.58 (Unix) OpenSSL/1.1.1u mod_fastcgi/mod_fastcgi-SNAP-0910052141
WebServer to PHP Interface cgi-fcgi
Joomla! Version Joomla! ‎5.1.5-dev+pr.39824
Joomla Backward Compatibility Plugin Disabled
User Agent Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:129.0) Gecko/20100101 Firefox/129.0

This pull request has been automatically rebased to 5.2-dev.

Note for maintainers: this PR needs update so it won't revert #43859

basically adding name: ctx.item.name, should be enough after line 15 in
administrator/components/com_media/resources/scripts/components/browser/utils/utils.es6.js