Programmatically creating folders in lists results in invisible or incorrectly named folders

Question

So far I've found two ways to create a folder via pnpjs-wrapped API calls. One, which is

SPList.rootFolder.folders.add("Name")

works well for a document library, but, when used in a list, it results in having an invisible folder that you can access via URL, but can't see in the list. Second way is

SPList.items.add({ Title: "Name", ContentTypeId: "0x0120" })

and it results in actually having two entities created in the list. One is a list item (in items collection) with the given name, which can be seen in the list and used to access the folder. Second is the actual folder (in folders collection), but its name is like #_.000 where # stands for the list item ID. And when I access the new folder I see the #_.000 name in breadcrumbs and in the URL, instead of given name.

In this case the item properties are like:

AssignedToId: null
AssignedToStringId: null
Attachments: false
AuthorId: 10
Body: null
Category: null
Comment: null
ComplianceAssetId: null
ContentTypeId: "0x0120005B3A6725E6545840A09FDD3C367BC6FA"
Created: "2019-06-21T04:54:58Z"
EditorId: 10
FileSystemObjectType: 1
ForeignKeyId: null
GUID: "b4ffd422-19e3-40ae-b58d-4c56280b159b"
ID: 49
Id: 49
IssueStatus: null
Line: null
Modified: "2019-06-21T04:54:58Z"
OData__UIVersionString: "1.0"
Priority: null
RelatedIssuesId: []
ServerRedirectedEmbedUri: null
ServerRedirectedEmbedUrl: ""
TaskDueDate: null
Title: "MtFolder"
V3Comments: null
odata.editLink: "Web/Lists(guid'783d01c4-7dca-4ab2-aa7b-ca2e4c89283d')/Items(49)"
odata.etag: ""1""
odata.id: "debe0338-9d3a-4770-94b0-aa54d92df311"
odata.type: "SP.Data.LookupListListItem"

The folder properties are like

Exists: true
IsWOPIEnabled: false
ItemCount: 0
Name: "49_.000"
ProgID: null
ServerRelativeUrl: "/Lists/LookupList/49_.000"
TimeCreated: "2019-06-21T04:54:58Z"
TimeLastModified: "2019-06-21T04:54:58Z"
UniqueId: "a29e5616-a82d-475a-b649-94f926add5ab"
WelcomePage: ""
odata.editLink: "Web/GetFolderByServerRelativePath(decodedurl='/Lists/LookupList/49_.000')"
odata.id: "https://contoso.sharepoint.com/_api/Web/GetFolderByServerRelativePath(decodedurl='/Lists/LookupList/49_.000')"
odata.type: "SP.Folder"

So I need that folder's Name property to be the same as the item's Title. This is not the case, obviously. But I can't find any properties to link the folder with the item so that I could, for example, fetch the folder based on the item's properties and update its name. There is something that looks like a link, however, in the item entity itself. For example, when handling the item.add() promise's result, I can try:

.then(result => {
    return result.item.folder.update({
        Name: folderName
    });
})

But this only returns 204 no content result, as if the folder wasn't saved yet. Yet, it can be opened just a moment later with the same URL the folder.update() method tried to post the update info. I could probably wait and call the item.folder.update() a moment later, but what moment exactly? Don't see a way to hook into the chain the moment the folder was saved.

So, this is my investigation so far.

Is there a way to hook into the result handling not for the new item, but for the attached folder? Or is there another method or a correct set of arguments for folders.add() or items.add() methods to create both the "folder-item" and the actual corresponding folder with correct name?

Update I've checked the item.folder property (and there is corresponding folder.ListItemAllFields property for the list item associated). No, it still doesn't work even if I wait a few seconds after the item/folder pair was created. I create a "folder-item", then hit a breakpoint before trying to update the associated folder. I open another page and check if the list already contains the "folder-item" - it does. Then I release the breakpoint and still get 204 status code. My only guess is the property is read-only. And looks like pnpjs doesn't fully wrap the folder.ListItemAllFields property, because I've seen some other SP API wrapper in .net is actually able to edit those properties...

Answer 1

Try this, I could make it work.

$pnp.sp.web.lists.getByTitle('CustomList').items.add({ Title: "Name1", ContentTypeId: "0x0120" }).then(result => {
    return result.item.update({
        Title: "Name1",
    FileLeafRef: '/Name1'
    });
})