diff --git a/frontend/src/Settings/MediaManagement/RootFolder/RootFolders.js b/frontend/src/Settings/MediaManagement/RootFolder/RootFolders.js
index 0701c451c..9bfd82bbd 100644
--- a/frontend/src/Settings/MediaManagement/RootFolder/RootFolders.js
+++ b/frontend/src/Settings/MediaManagement/RootFolder/RootFolders.js
@@ -55,7 +55,7 @@ class RootFolders extends Component {
>
{
- items.sort(sortByName).map((item) => {
+ items.map((item) => {
const qualityProfile = qualityProfiles.find((profile) => profile.id === item.defaultQualityProfileId);
const metadataProfile = metadataProfiles.find((profile) => profile.id === item.defaultMetadataProfileId);
return (
diff --git a/frontend/src/Settings/MediaManagement/RootFolder/RootFoldersConnector.js b/frontend/src/Settings/MediaManagement/RootFolder/RootFoldersConnector.js
index 59508fd66..ae180a54e 100644
--- a/frontend/src/Settings/MediaManagement/RootFolder/RootFoldersConnector.js
+++ b/frontend/src/Settings/MediaManagement/RootFolder/RootFoldersConnector.js
@@ -3,11 +3,13 @@ import React, { Component } from 'react';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { deleteRootFolder, fetchRootFolders } from 'Store/Actions/settingsActions';
+import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
+import sortByName from 'Utilities/Array/sortByName';
import RootFolders from './RootFolders';
function createMapStateToProps() {
return createSelector(
- (state) => state.settings.rootFolders,
+ createSortedSectionSelector('settings.rootFolders', sortByName),
(state) => state.settings.qualityProfiles,
(state) => state.settings.metadataProfiles,
(rootFolders, quality, metadata) => {